背景

我们在使用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:

我们安装一个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次，是不是太累了？如果文件很多，都要一个一个这样添加吗？ 当然有解决方案。 我们可以自己写一个方法去解放上面手动添加的烦恼，也就是 多页面打包的通用方案 ，这个明天写一下。

结尾

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