React官方脚手架 create-react-app的多入口配置

在生成react项目时候，使用Facebook官方脚手架create-react-app是一个不错的选择，但是默认只能生成一个SPA，入口是index.html。虽然页面的切换可以用前端路由来实现，但某些情况下，仍要将页面切分为多个页面，或者在同一个工程开发多个SPA，这个时候就需要将项目改为多入口

react官方对这个问题的回答是：
Sorry, but Create React App doesn’t support this use case.
You can eject and then configure Webpack to have multiple entry points.
好吧，又要撸webpack了

1.Eject

webpack.config默认是没有的，需要将其eject出来才可以自定义
在项目目录下npm run eject或者yarn eject
注意此过程是不可逆的，将配置eject出来后就不能再隐藏了
eject后，我们的目录下会多一个config文件夹
我们就可以更改webpack.config来将项目自定义为多入口了

2.修改webpack配置

首先要将项目的入口以及出口变为多个
1.entry从原来的数组扩展为对象，每个key代表一个入口。然后定义每个入口的入口文件

我自己的项目结构是这样的，每个项目的入口在对应文件夹的index，所以入口就是src/xxx/index

    entry: {
      customer_info: [
        require.resolve('react-dev-utils/webpackHotDevClient'),
        // require.resolve('./polyfills'),
        require.resolve('react-error-overlay'),
        paths.appSrc + '/customer_info/index',
      ],
      personal_speechcraft:[
        require.resolve('react-dev-utils/webpackHotDevClient'),
        // require.resolve('./polyfills'),
        require.resolve('react-error-overlay'),
        paths.appSrc + "/personal_speechcraft/index",
        ]
    },

2.output中的filename要区分输出名，可增加[name]变量，这样会根据entry分别编译出每个entry的js文件。

output: {
      path: paths.appBuild,
      pathinfo: true,
      filename: 'static/js/[name].bundle.js',
      chunkFilename: 'static/js/[name].chunk.js',
      publicPath: paths.publicUrlOrPath,
      devtoolModuleFilenameTemplate: info =>
        path.resolve(info.absoluteResourcePath),
    },

3.修改HtmlWebpackPlugin生成多个HTML
Webpack配置多入口后，只是编译出多个入口的JS，同时入口的HTML文件由HtmlWebpackPlugin生成，也需做配置。

      new HtmlWebpackPlugin({
        inject: true,
        chunks: ["customer_info"],
        template: paths.appHtml,
        filename: 'customer_info.html',
      }),
      new HtmlWebpackPlugin({
        inject: true,
        chunks: ["personal_speechcraft"],
        template: paths.appHtml,
        filename: 'personal_speechcraft.html',
      }),

多入口文件需要单独配置html入口文件，模板使用同一套即可,但输出的文件以及打包的内容需要单独配置，一个页面加一个配置即可

至此webpack.config的配置就已完成，但还需要对开发环境进行一些配置

3.修改DevServer配置

官方脚手架的配置是将所有的访问都重定向至index.html，但这不符合我们多入口项目的配置，所以需要将DevServer的配置修改一下

    historyApiFallback: {
      // Paths with dots should still use the history fallback.
      // See https://github.com/facebook/create-react-app/issues/387.
      disableDotRule: true,
      // 指明哪个路径映射哪个html
      rewrites: [
        { from: /^\/customer_info.html/, to: '/build/customer_info.html' },
        { from: /^\/personal_speechcraft.html/, to: '/build/personal_speechcraft.html' },
      ]
    },

至此，多入口配置就完成了，在项目start后通过/xxx.html就可以访问对应的页面
build之后也会生成2个html文件并且导入不同的js和css文件