1初始化项目
npm init create-react-app my-app
2.修改index
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
3.修改app.js文件
import React from 'react'; import './App.css'; function App() { return ( <div className="App"> page1 </div> ); } export default App;
4.修改多目录结构
5.弹出webpack配置
npm run eject
6.进入config/paths.js中配置appIndexJs路径，默认是路径字符串，现在获取几个页面的字符串列表，将会配置在入口地址。
在module.exports之前添加如下代码
const glob = require('glob');
// 获取指定路径下的入口文件
function getEntries(globPath) {
const files = glob.sync(globPath),
entries = {};
files.forEach(function(filepath) {
const split = filepath.split('/');
const name = split[split.length - 2];
entries[name] = './' + filepath;
});
return entries;
}
const entries = getEntries('src/**/index.js');
function getIndexJs() {
const indexJsList = [];
Object.keys(entries).forEach((name) => {
const indexjs = resolveModule(resolveApp, `src/${name}/index`)
indexJsList.push({
name,
path: indexjs
});
})
return indexJsList;
}
const indexJsList = getIndexJs()
然后更改module.exports内容
module.exports = { dotenv: resolveApp('.env'), appPath: resolveApp('.'), appBuild: resolveApp('build'), appPublic: resolveApp('public'), appHtml: resolveApp('public/index.html'), appIndexJs: indexJsList, // +++++++++++++ appPackageJson: resolveApp('package.json'), appSrc: resolveApp('src'), appTsConfig: resolveApp('tsconfig.json'), appJsConfig: resolveApp('jsconfig.json'), yarnLockFile: resolveApp('yarn.lock'), testsSetup: resolveModule(resolveApp, 'src/setupTests'), proxySetup: resolveApp('src/setupProxy.js'), appNodeModules: resolveApp('node_modules'), publicUrl: getPublicUrl(resolveApp('package.json')), servedPath: getServedPath(resolveApp('package.json')), entries // +++++++++++++ };
上面有+号的部分为更改的内容。
7.配置entry入口
// 配置入口 const entry = {} paths.appIndexJs.forEach(e => { entry[e.name] = [ isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), e.path ].filter(Boolean) });
8.更改出口文件配置
// 没更改之前的 // filename: isEnvProduction // ? 'static/js/[name].[contenthash:8].js' // : isEnvDevelopment && 'static/js/bundle.js', ... // chunkFilename: isEnvProduction // ? 'static/js/[name].[contenthash:8].chunk.js' // : isEnvDevelopment && 'static/js/[name].chunk.js', // 更改后的 filename: isEnvProduction ? 'static/js/[name]/[name].[contenthash:8].js' : isEnvDevelopment && 'static/js/[name]/[name].bundle.js', ... chunkFilename: isEnvProduction ? 'static/js/[name]/[name].[contenthash:8].chunk.js' : isEnvDevelopment && 'static/js/[name]/[name].chunk.js',
9.更改htmlwebpackPlugin
HtmlWebpackPlugin
这个plugin曝光率很高，他主要有两个作用
为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
现在删除之前的配置，然后加入一下的Plugin配置。
...Object.keys(paths.entries).map((name) => { return new HtmlWebpackPlugin( Object.assign( {}, { inject: true, chunks: [name], template: paths.appHtml, filename: name + '.html', }, isEnvProduction ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined ) ) }),
// new ManifestPlugin({ // fileName: 'asset-manifest.json', // publicPath: publicPath, // generate: (seed, files, entrypoints) => { // const manifestFiles = files.reduce((manifest, file) => { // manifest[file.name] = file.path; // return manifest; // }, seed); // const entrypointFiles = entrypoints.main.filter( // fileName => !fileName.endsWith('.map') // ); // return { // files: manifestFiles, // entrypoints: entrypointFiles, // }; // }, // }),
打包后 应用资源错误
解决方案：package.json
添加
"homepage": ".",
原文链接：https://blog.csdn.net/qq_38111015/article/details/89252606
