持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情
背景
我们在使用Webpack的项目中，比如react项目，或者umijs中，如果使用的是多页面，那么对于多页面的打包是怎么处理的呢？
项目目录如下：
如果想要我图中圈出的文件也要做出口文件处理，也就是打包输出文件目录下有它们几个，我们会怎么处理呢？
现在默认的出口文件处理的是src/index.js和src/list.js，目录如下：
默认的打包文件中有入口文件src/index.js和src/list.js对应的出口文件。
现在的配置文件如下：
webpack.config.js:
那么想要src/detail、src/index、src/login这些文件也要做打包处理，该怎么做呢？
手动添加多页面打包配置
对于上面的问题，我们是可以这样处理：
首先，肯定是 把想要打包的文件设置为入口文件：
先试一下src/detail这个目录下的文件：
配置为入口文件
webpack.config.js:
我们先在配置文件webpack.config.js下，入口entry下添加了一个detail:'./src/detail/index.js'的入口文件。
添加出口html, 使用html-webpack-plugin
然后，还要再添加一个出口的html,使用插件在配置文件里面去添加设置，具体如下：
webpack.config.js:
注意这里：没有添加src/list 对应的html配置，也是因为文件里本来就没有写src/list对应的html文件，src/list.html没有，所以，这块也没有配置，后面打包生成的出口文件里只有list.js文件没有list.html文件。
我们安装一个html-webpack-plugin的插件：
npm install html-webpack-plugin
然后在webpack.config.js配置文件里面去引入html-webpack-plugin插件，可以自动创建出口页面html,在插件plugins中去new一个HtmlWebpackPlugin，去配置detail。
里面的templace：设置的是模板的相对或者绝对路径，filename：设置的是出口的html名称。
具体的细节，可查看官方文档 html-webpack-plugin
执行构建进行打包
OK，设置完成，执行构建，看下效果：
成功打包了，看看里面dist/detail.html文件内容：
入口文件下的src/detail/index.html是这样的:
问题：所有打包的html被引入了多余的入口点
入口文件打包后的页面内容没什么不同，但是大家有没有发现一点，出口detail里把所有的出口js文件都引入了。
按理说，它只需要引入自己对应的detail.js就可以了，但是为什么却要全部引入，这样不相关的文件引入，也不太好啊。
然后其他出口也是这样的，引入了所有的入口点：
dist/index.html:
官方文档是这样说的：
解决被引入多余入口点的问题，使用chunks
那有没有解决方案呢？
有的。
插件里设置chunks属性可解决此问题：
github文档链接
就是设置该出口页面对应的chunks。
配置如下，webpack.config.js:
这样设置：chunks:['detail']，执行构建，看效果：
成功啦。
新问题：这样太累了
以上就是我们打包了一个detail出口文件的所要做的事情：
先在配置文件里去设置入口，然后在插件里new 一个HtmlWebpackPlugin并进行配置。
这只是一个，如果还有其他的文件需要打包处理呢，比如文章刚开始提到的，login、index这两个，如果也做打包处理，按照上面打包detail的步骤再来2遍，打包三个，我们需要这样重复3次，是不是太累了？如果文件很多，都要一个一个这样添加吗？
当然有解决方案。
我们可以自己写一个方法去解放上面手动添加的烦恼，也就是 多页面打包的通用方案 ，这个明天写一下。
结尾
关于多页面打包的通用方案 到底如何做的，会手写实现一下，可以关注我下篇文章哦，明天更文。
