html-webpack-plugin

我們可以看到，webpack 生成 print.bundle.js
和 app.bundle.js
檔案，這也和我們在 index.html
檔案中指定的檔名稱相對應。如果你在瀏覽器中開啟 index.html
，就可以看到在點選按鈕時會發生什麼。
但是，如果我們更改了我們的一個入口起點的名稱，甚至添加了一個新的名稱，會發生什麼？生成的包將被重新命名在一個構建中，但是我們的index.html
檔案仍然會引用舊的名字。我們用 HtmlWebpackPlugin
來解決這個問題。

clean-webpack-plugin

你可能已經注意到，由於過去的指南和程式碼示例遺留下來，導致我們的 /dist
資料夾相當雜亂。webpack 會生成檔案，然後將這些檔案放置在 /dist
資料夾中，但是 webpack 無法追蹤到哪些檔案是實際在專案中用到的。
通常，在每次構建前清理 /dist
資料夾，是比較推薦的做法，因此只會生成用到的檔案。讓我們完成這個需求。
clean-webpack-plugin
是一個比較普及的管理外掛，讓我們安裝和配置下。

webpack-manifest-plugin

你可能會感興趣，webpack及其外掛似乎“知道”應該哪些檔案生成。答案是，通過 manifest，webpack 能夠對「你的模組對映到輸出 bundle 的過程」保持追蹤。如果你對通過其他方式來管理 webpack 的

webpack.HotModuleReplacementPlugin

webpack自帶，熱替換外掛

webpack.optimize.UglifyJsPlugin

webpack自帶，執行 UglifyJS 來壓縮輸出檔案

壓縮前

壓縮後

webpack.DefinePlugin

webpack自帶，設定環境變數
可以在入口檔案index.js裡用process.env.NODE_ENV獲得

CommonsChunkPlugin

程式碼分離 webpack 中文網 新手教程

webpack自帶，刪除程式碼分離不同js中的重複模組

CommonsChunkPlugin允許我們將常見的依賴項提取到現有的條目塊或全新的塊中。我們來使用這個來重複上一個例子中的lodash依賴：

手動通過entry（入口）進行程式碼分離時，這種方法有一些陷阱：

• 如果輸入塊之間有任何重複的模組，它們將被包含在兩個bundle中。
• 它並不靈活，不能用於使用核心應用程式邏輯動態分割程式碼。

這兩點中的第一點絕對是我們示例的一個問題，因為lodash也是在./src/index.js中匯入的，因此將在兩個bundle中重複。我們通過使用CommonsChunkPlugin來刪除這個重複。

增加如下程式碼

使用之前

使用之後

作者：waka
連結：https://www.jianshu.com/p/fceb2ef5607d
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。