关于create-react-app构建多页应用（mpa）的方法及踩的坑

最近因为项目需要，用create-react-app构建了一个多页应用，可能是webpack版本比较高的原因，webpack版本4.41，create-react-app版本3.2，配置过程中踩了一个坑，一直报'filter' of undefined，故在此记录一下，希望能够帮助到遇到同样问题的同行。

首先贴出我测试用的目录结构

两个页面index.html和index2.html，分别对应index.js和index2.js

运行 npm run eject 命令，弹出配置文件，配置多页应用要更改webpack的配置文件，需要更改两个文件config目录下paths.js和webpack.config.js

1、首先更改paths.js文件

2、更改webpack.config.js中的 入口 entry配置

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

3、更改出口 output 配置

3、修改HtmlWebpackPlugin配置

4、增加一个HtmlWebpackPlugin，有多少个页面对应增加多少

5、踩的坑

当我进行到这一步的时候，运行npm run build，一直报错，'filter' of undefined

经过分析之后终于找到了问题所在

webpack.config.js中有这样一段代码，需要注释掉，报错的原因也在entrypoints.main.filter()上

原因在webpack的entry配置有个默认值，相信大家看了接下来的这张图片后就一目了然了

第一次写点平常遇到的问题，一方面是为了加深印象，一方面也是想能够帮助遇到这个问题的朋友们