複習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便可，不須要手動再去增長配置了。