React配置多页应用打包失败，报错Cannot read property 'filter' of undefined解决方案

起因

最近再做一个react的多页应用，在修改过 webpack 的 entry 及 HtmlWebpackPlugin 等配置后，进行打包测试，运行 npm run build 后控制台报错:

Creating an optimized production build...
Failed to compile.

Cannot read property 'filter' of undefined

分析

因为控制台并没有明确提示错误位置，所以开始在修改的 webpack.config.js 文件中用到 filter方法的地方排查。开始以为是 entry 配置有问题，但经过测试发现问题不在 entry 。

之后对比了不同版本的 create-react-app 生成的 webpack.config.js文件中所用到 filter方法的地方，发现新的配置文件中 ManifestPlugin 的配置项发生了变化。

// 这是旧版的 ManifestPlugin 配置
new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
}),
      
// 这是新版的 ManifestPlugin 配置
new ManifestPlugin({
    fileName: 'asset-manifest.json',
    publicPath: paths.publicUrlOrPath,
    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')
        );
        console.log('!!', entrypointFiles)

        return {
            files: manifestFiles,
            entrypoints: entrypointFiles,
        };
    },
}),

可以看到配置项中多了 generate 这一属性，其中就有用到 filter方法。其中 entrypoints.main 调用了 filter方法，经过输出得知 entrypoints.main 的值是与 entry 配置对应的。

默认情况下 entry 的值是一个 Array，因此 entrypoints.main 的值也一个 Array，但是配置多页面时是把其改为了 Object，Object 没有 filter方法，因此报错。

解决方案

1. 方案一：删除 generate属性，保持与老版本生成的 create-react-app 生成的 ManifestPlugin 配置一致。
2. 方案二：修改 entrypoints.main 中的 main 为你在 entry 中配置的项目首页的 key。我的 entry 配置中首页的 key 为 index ，因此可改为 entrypoints.index。

再次运 npm run build 即可编译成功。