16.13.1React最新配置多页应用方法

React最新配置多页应用方法

最近在学习配置多页引用，走了很多弯路，查找了很多资料，为了避免以后还有像我这样浪费时间排查问题的朋友，特意写篇博客记录一下。
就目前的Webpack默认配置来看，它并不希望你去配置多页应用 ，希望确切需要的朋友去使用，此次使用react最新版本16.13.1

eject逆编译项目

最新的create-react-app脚手架已经把webpack集成到内部，如果想配置多页应用必须进行逆编译把webpack配置暴露出来，此过程不可逆

npm run eject

执行后项目会多出config scripts文件夹，我们只需要更改config文件夹内部的path.js webpackDevServer.config.js

配置path.js

在moudule.exports下暴露多页应用路径

// html路径
appIndexHtml: resolveApp('public/index.html'),
appQueryHtml: resolveApp('public/query.html'),
// html对应的js入口文件路径
appIndexJs: resolveModule(resolveApp, 'src/pages/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/pages/query/index'),

配置WebpackDevServer.config.js

配置entry

默认的entry是一个数组，多页应用注意要更改成为一个对象

	// 配置多页面各个js文件路径
    entry: {
   
      index: [
        paths.appIndexJs,
        isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
      ].filter(Boolean),