Webpack 4正式發布！從0配置到生產模式，你需要知道的都在這裡了

webpack 4作為零配置模塊捆綁器

webpack功能強大，有很多獨特的功能，但其中一個難點是配置文件。

為中大型項目提供webpack的配置並不是什麼大問題。 然而，對於較小的項目來說，這很麻煩，特別是當你想要啟動一些玩具應用時。

這就是Parcel得到了很多注意力的原因。

Sean和webpack團隊改變了這一現狀：webpack 4默認不需要配置文件！

下面讓我們試試看。

創建一個新目錄並進入它：

運行以下命令來初始化package.json：

現在讓我們安裝webpack 4。

我們還需要webpack-cli，它作為一個獨立的包提供：

現在打開package.json並添加一個構建腳本：

保存並關閉文件

試著運行：

會發現出現下面的提示：

webpack 4正在尋找./src中的入口點！ 如果你不知道這意味著什麼去看看我以前的文章《從Gulp切換到webpack》(https://www.valentinog.com/blog/from-gulp-to-webpack-quickstart/)。

簡而言之：入口點是webpack尋找開始構建Javascript包的文件。

但是從webpack 4開始，不需要定義入口點：它會將作為默認值！

測試新特性非常簡單，創建文件：

然後再重新構建：

你將會在 中獲得該軟體包。

什麼？先等等。 居然不需要定義輸出文件？

在webpack 4中，不需要定義入口點和輸出文件。

我知道很多人並不那麼激動。 Webpack的主要優勢是代碼拆分。 但是相信我，使用零配置工具可以提高你的速度。

所以這是第一條：webpack 4不需要配置文件。

它會查找作為默認入口點。 而且，它會在中吐出這個包。

在下一節中，我們將看到webpack 4的另一個很好的特性：生產模式和開發模式。

webpack 4: 生產模式和開發模式

擁有2個配置文件是webpack中的常見模式。

一個典型的項目可能有：

一個用於開發的配置文件，用於定義webpack dev伺服器和其他東西

用於生產的配置文件，用於定義UglifyJSPlugin和sourcemaps等

雖然更大的項目可能仍然需要2個文件，但是在webpack 4中，可以無需任何配置。

怎麼會這樣？

webpack 4引入了生產和開發模式。

事實上，如果你注意的輸出，你會看到一個很好的警告：

The 『mode』 option has not been set. Set 『mode』 option to 『development』 or 『production』 to enable defaults for this environment.（「mode」選項尚未設置。 將「mode」選項設置為「development」或「production」以啟用此環境的默認值。）

什麼意思？ 讓我們來看看。

打開package.json並填入腳本部分，如下所示：

現在運行：

並看看./dist/main.js。 你看到了什麼？ 是的，我知道，一個無聊的包…沒有縮小！

現在嘗試運行：

並看看./dist/main.js。 你現在看到什麼？ 一個縮小的包！

Yes!

生產模式可以實現各種優化。 包括縮小，規模提升，tree-shaking等等。

另一方面，開發模式針對速度進行了優化，只不過是提供未縮小的捆綁包。

下面是第二條：webpack 4引入了生產和開發模式。

在webpack 4中，你可以不用一行配置！ 只需定義標記，即可免費獲得一切！

關於webpack更多的特性：

sideEffects 設置?—— 在打包體積上巨大的勝利

支持 JSON 和 Tree Shaking

升級到 UglifyJS2

模塊類型的引入 + 支持 .mjs

: (在 webpack 3 默認啟用) 啟用了所有的 Javascript 模塊系統：CommonJS，AMD，ESM

模塊，所有的其他模塊系統不可用（默認 .mjs 文件）

: 只有 CommonJS 和，EcmaScript 模塊不可用

`json: JSON 數據，它可以通過 require 和 import 來引入使用（默認 .json 的文件）

WebAssembly模塊（當前為 .wasm 文件的實驗文件和默認文件）

另外 webpack 現在支持查找 , , 和 拓展文件來解析

支持 WebAssembly

去除 CommonsChunkPlugin

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！