复习webpack4之多页面应用打包

之前学习过webpack3的知识，但是webpack4升级后还是有很多变动的，所以这次重新整理一下webpack4的知识点，方便以后复习。

这次学习webpack4不仅仅要会配置，记住核心API，最好还要理解一下webpack更深层次的知识，比如打包原理等等，所以可能会省略一些比较基础的内容，但是希望我可以通过此次学习掌握webpack，更好地应对以后的工作。

1.多页面应用打包

我们在开发中，有时候可能会遇到多页面打包，那么多页面打包要如何配置呢？

假设我们现在有两个页面，对应两个js，一个叫index.js，另一个叫list.js。

首先，入口配置要改一下：

然后修改htmlWebpackPlugin插件：

这样会生成两个html文件，用的模板都是index.html，第一个html叫index.html，chunks代表需要引入的js文件，分别是runtime.js，vendors.js，main.js。另一个list.html，引入的js分别为runtime.js，vendors.js，list.js。

如果需要多增加一个页面，可以去多增加一个HtmlWebpackPlugin，然后做相应的配置。

有没有方法可以增加一个页面的时候，不需要复制粘贴呢？

我们先把module.exports输出的对象设置为一个变量

const configs = {
    // ... 配置项
}

module.exports = configs
复制代码

然后创建一个函数

获取有几个入口文件，不同入口文件创建对应的html文件，引入对应的js。

然后把plugins放到configs中。

configs.plugins = makePlugins(configs);
复制代码

这样如果需要增加页面，只需要增加js即可，不需要手动再去增加配置了。

转载于:https://juejin.im/post/5cf505a9f265da1b7401e7cc