學(xué)習(xí) webpack 極其推薦跟著這個教程走一遍 https://doc.webpack-china.org/guides/

html-webpack-plugin

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

clean-webpack-plugin

你可能已經(jīng)注意到，由于過去的指南和代碼示例遺留下來，導(dǎo)致我們的 /dist
文件夾相當(dāng)雜亂。webpack 會生成文件，然后將這些文件放置在 /dist
文件夾中，但是 webpack 無法追蹤到哪些文件是實際在項目中用到的。
通常，在每次構(gòu)建前清理 /dist
文件夾，是比較推薦的做法，因此只會生成用到的文件。讓我們完成這個需求。
clean-webpack-plugin
是一個比較普及的管理插件，讓我們安裝和配置下。

webpack-manifest-plugin

你可能會感興趣，webpack及其插件似乎“知道”應(yīng)該哪些文件生成。答案是，通過 manifest，webpack 能夠?qū)Α改愕哪K映射到輸出 bundle 的過程」保持追蹤。如果你對通過其他方式來管理 webpack 的輸出更感興趣，那么首先了解 manifest 是個好的開始。
通過使用 WebpackManifestPlugin
，可以直接將數(shù)據(jù)提取到一個 json 文件，以供使用。
我們不會在此展示一個關(guān)于如何在你的項目中使用此插件的完整示例，但是你可以仔細深入閱讀 manifest 的概念頁面，以及通過緩存指南來弄清如何與長期緩存相關(guān)聯(lián)。

webpack.HotModuleReplacementPlugin

webpack自帶，熱替換插件

webpack.optimize.UglifyJsPlugin

webpack自帶，運行 UglifyJS 來壓縮輸出文件

壓縮前

壓縮后

webpack.DefinePlugin

webpack自帶，設(shè)置環(huán)境變量
可以在入口文件index.js里用process.env.NODE_ENV獲得

CommonsChunkPlugin

代碼分離 webpack 中文網(wǎng) 新手教程

webpack自帶，刪除代碼分離不同js中的重復(fù)模塊

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

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

• 如果輸入塊之間有任何重復(fù)的模塊，它們將被包含在兩個bundle中。
• 它并不靈活，不能用于使用核心應(yīng)用程序邏輯動態(tài)分割代碼。

這兩點中的第一點絕對是我們示例的一個問題，因為lodash也是在./src/index.js中導(dǎo)入的，因此將在兩個bundle中重復(fù)。我們通過使用CommonsChunkPlugin來刪除這個重復(fù)。

增加如下代碼

使用之前

使用之后