复习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便可，不须要手动再去增长配置了。