create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined

create-react-app创建的项目配置多入口MPA模式。报Cannot read property ‘filter’ of undefined

多入口配置
一.首先eject项目
执行npx create-react-app train-ticket,安装react项目。这时候package.json中react-srcipt已经集成了所有的逻辑，此时需要个性化的配置，需要执行npm run eject，将webpack配置文件拉出，并执行npm install安装依赖。执行完上述命令之后，文件树如图所示

二.配置webpack文件
①在config/webpack.config首先找到配置文件入口entry处，这里只配置一个入口文件，要将这里改成多入口的模式，因此应该将这里改成对象的形式。

    entry:[
	     paths.appIndexJs, 
	     isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')
 		].filter(Boolean),

给每一个不同的入口起不同的名字

   entry:{
      index: [paths.appIndexJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),
      query: [paths.appQueryJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),
      ticket: [paths.appTicketJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),
      order: [paths.appOrderJs, isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient')].filter(Boolean),

②这里的入口文件的路径写在paths文件中，因此到config/paths中添加这几个变量。在项目中这几个文件被放在新建的单独的文件夹中，分别放在index，order，ticket，query中的index.js中。

在path中添加如下变量

appIndexJs: resolveModule(resolveApp, 'src/index/index'),
appQueryJs: resolveModule(resolveApp, 'src/query/index'),
appTicketJs: resolveModule(resolveApp, 'src/ticket/index'),
appOrderJs: resolveModule(resolveApp, 'src/order/index'),

③最后修改HtmlWebpackPlugin，生成四个不同的html引入这些入口打包后的文件。生成几个页面，就要配置几个HtmlWebpackPlugin，filename为最后的html名称，chunkwei所引用的打包文件。

      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            filename: 'index.html',
            chunk: ['index'],
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),
      new HtmlWebpackPlugin(
        Object.assign(
          {},
          {
            inject: true,
            template: paths.appHtml,
            filename: 'query.html',
            chunk: ['query'],
          },
          isEnvProduction
            ? {
                minify: {
                  removeComments: true,
                  collapseWhitespace: true,
                  removeRedundantAttributes: true,
                  useShortDoctype: true,
                  removeEmptyAttributes: true,
                  removeStyleLinkTypeAttributes: true,
                  keepClosingSlash: true,
                  minifyJS: true,
                  minifyCSS: true,
                  minifyURLs: true,
                },
              }
            : undefined
        )
      ),

在这里同样需要四个html模板，在public目录下创建，并在config/paths文件中指定路径。

  appHtml: resolveApp('public/index.html'),
  appQuery: resolveApp('public/query.html'),
  appTicket: resolveApp('public/ticket.html'),
  appOrder: resolveApp('public/iorder.html'),

三.运行打包命令
当配置完之后，运行打包命令，控制台报错，Cannot read property ‘filter’ of undefined，起初以为是entry里面的filter报错，后来发现entry里面就算不写filter也是会报错，最后定位到错误原因在ManifestPlugin

ManifestPlugin这个插件的作用是生成一份.json的文件，通过该文件的映射关系可以让我们知道webpack是如何追踪所有模块并映射到输出bundle中的。我们先来看原始的配置,这里fileName设置了输出文件名asset-manifest.json，publicPath设置了输出路径，最终要的是最后一个generate参数，自定义了输出的内容，里面有一段是取entrypoints.main，这是针对单一入口的配置，因为单一入口不指定name的情况默认name为main，当改成多入口的方式了之后这里面在entrypoints中自然是读取不到main这个值的，因此就报错，这里将generate这个参数去掉，恢复其默认值即可，或者将entrypoints这个key去掉。

 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,
      };
    },
  }),

如图所示为单入口的entrypoints对象

如图所示为打印出修改多入口后的的entrypoints对象