webpack里如何实现多页面打包？会有哪些问题？

背景

我们在使用Webpack的项目中，比如react项目，或者umijs中，如果使用的是多页面，那么对于多页面的打包是怎么处理的呢？项目目录如下：

手动添加多页面打包配置

对于上面的问题，我们是可以这样处理：首先，肯定是 把想要打包的文件设置为入口文件：先试一下src/detail这个目录下的文件：

配置为入口文件

webpack.config.js:

添加出口html, 使用html-webpack-plugin

然后，还要再添加一个出口的html,使用插件在配置文件里面去添加设置，具体如下：webpack.config.js:

我们安装一个html-webpack-plugin的插件：

npm install html-webpack-plugin 

然后在webpack.config.js配置文件里面去引入html-webpack-plugin插件，可以自动创建出口页面html,在插件plugins中去new一个HtmlWebpackPlugin，去配置detail。里面的templace：设置的是模板的相对或者绝对路径，filename：设置的是出口的html名称。

<img src=“https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/31bd561be4d64f07a2bad9ea008cbcf7~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 具体的细节，可查看官方文档 [html-webpack-plugin](https://link.juejin.cn/?target=https%3A%2F%2Fwww.webpackjs.com%2Fplugins%2Fhtml-webpack-plugin%2F “https://www.webpackjs.com/plugins/html-webpack-plugin/”” style=“margin: auto” />

执行构建进行打包

OK，设置完成，执行构建，看下效果：

问题：所有打包的html被引入了多余的入口点

入口文件打包后的页面内容没什么不同，但是大家有没有发现一点，出口detail里把所有的出口js文件都引入了。

然后其他出口也是这样的，引入了所有的入口点：dist/index.html:

解决被引入多余入口点的问题，使用chunks

那有没有解决方案呢？有的。插件里设置chunks属性可解决此问题：

<img src=“https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b0df68ddecc34c948146fdd59309c480~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)github文档链接就是设置该出口页面对应的chunks。配置如下，webpack.config.js” style=“margin: auto” />

新问题：这样太累了

以上就是我们打包了一个detail出口文件的所要做的事情：先在配置文件里去设置入口，然后在插件里new 一个HtmlWebpackPlugin并进行配置。_这只是一个，如果还有其他的文件需要打包处理呢，比如文章刚开始提到的，login、index这两个，如果也做打包处理，按照上面打包detail的步骤再来2遍，打包三个，我们需要这样重复3次，是不是太累了？如果文件很多，都要一个一个这样添加吗？_当然有解决方案。我们可以自己写一个方法去解放上面手动添加的烦恼，也就是 多页面打包的通用方案 ，这个明天写一下。

结尾

关于多页面打包的通用方案 到底如何做的，会手写实现一下，可以关注我下篇文章哦，明天更文。