??webpack 4 發布了！?

原文：https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

代號: Legato ??

今天我們愉快的宣布 webpack 4(Legato)正式發布了！你可以使用 yarn 或者 npm 獲得它：

$> yarn add webpack --dev

或者

$> npm i webpack --save-dev

?? 為什麼叫 Legato?

首先我們會開始一個新傳統：為我們以後的每個大版本設定代號！因此，我們決定將命名這個特權給予我們最大的 OpenCollective 捐贈者：trivago！

當我們向其發出請求後他們是這麼回復我們的：

[在 trivago] 我們通常以音樂主題來命名我們的項目。例如，我們之前的 JS 框架叫 「Harmony」，我們的新框架叫「Melody」。PHP 的話我們使用基於 Symfony 上層封裝，我們叫它「Orchestra」。

Legato 意味著毫無間隙地連續演奏每個節奏。

這點和 Webpack 很像，Webpack 將我們的前端資源（JS，CSS甚至更多）無間隙的打包在一起。因此我們相信 「Legato」 這個代號會適合 Webpack。

—— ?Patrick Gotthardt

我們得知後也非常地激動，因為新版 Webpack 中我們所做的每一個更新目的都在於此，為了當大家在使用 Webpack 的時候敏捷連續毫無頓挫感。非常感謝過去的這些年 trivago 對 webpack 的無私捐贈支持，更感謝其為 webpack 4 命名！????

引申閱讀：?? trivago 幫助保護 webpack 的未來 ??

???有什麼更新？

webpack 4 有太多的新東西可以說了，但是我不可能在本文中列舉所有的內容，否則這篇文章就要推遲很久才能發布了。因此下面我會和大家分享一些我覺得有趣的更新內容，如果大家想要看所有的更新的話可以查閱 webpack 4 的更新日誌。

?? webpack 4 更快（速度提升98%）！

我們在社區中請求大家對 webpack 4 進行構建性能測試，得出的結果非常有趣。結果很驚人，構建時間降低了 60%-98%！！這裡給大家分享一下某個用戶的測試結果：

來源： Twitter

當然這只是一部分用戶的測試數據，你可以在我的推文的回復中查看他們所有的結果。

性能測試過程中也發現了一些 loader 的 bug 我們已經及時修復了！！PS: 我們還沒有實現多進程，或者緩存功能（計劃在v5版實現）。所以理論上我們的性能還有非常大的提升空間！！！！

構件速度是我們此次發布最主要的目標。你可以把所有的功能都添加到工具中，但是如果不能節省開發時間那你加這些功能又有什麼用呢？當然以上的這些都是部分示例，我們非常歡迎大家在推特上使用 #webpack #webpack4 開頭提交你們的構建時間報告。

?? Mode, 零配置以及默認值

我們為 webpack 新增了一個 mode 配置項。Mode 有兩個值：development 或者是 production，默認值是 production。Mode 是我們為減小生產環境構建體積以及節約開發環境的構建時間提供的一種優化方案。

如果想要了解更多 mode 配置項的內容，大家可以看看我們之前的一篇文章： webpack 4: mode 和優化。

另外，entry，output 這些配置項也都有默認值了。這意味著你不需要每次都配置它們了，當然包括 mode。這可能意味著從現在開始，你的配置文件在我們做出如此巨大改變之後會變得非常小！

> Legato 意味著毫無間隙地連續演奏每個節奏。

另外，我們提供零配置平台來擴展。webpack 最大的一個特色就是可擴展性。最終我們實現的零配置平台會是什麼樣子呢？當我們實現了 webpack presets 功能後，這意味著你可以基於零配置平台配置你自己，公司，甚至是社區的工作流配置用以繼承直接使用。

? 再見 CommonsChunkPlugin

在新版中我們廢棄並移除了 CommonsChunkPlugin，並且使用一些默認值以及更容易被複寫的新 API optimize.splitChunks 來代替它。現在你可以在大部分場景中享受自動分塊帶來的便利了！

註：騰訊視頻地址：https://v.qq.com/x/page/y0559vc6zin.html

如果想要了解更多該 API 可以查看這篇文章：webpack 4: 代碼分塊以及分塊優化

?? WebAssembly 支持

Webpack 現在默認支持在任何本地 WebAssembly 模塊中的 import 和 export 語句。這意味著你可以直接在 Rust, C++, C 或者其它 WebAssembly 支持語言中使用 import。

?? 模塊類型簡介以及 .mjs 支持

之前，JS 一直都是 Webpack 唯一的一等模塊類型。當用戶不需要使用 CSS/HTML 的時可能會造成一些麻煩。我們基於新的 API 抽象實現了 JS 類型。目前，我們已經支持5種模塊類型實現：

• javascript/auto: _（webpack 3 默認值）_ 所有的 JS 模塊規範都可用：CommonJS，AMD，ESM
• javascript/esm：EcmaScript 模塊規範，其它的模塊規範都不可用 (.mjs 文件的默認值)
• javascript/dynamic: 僅支持 CommonJS 和 AMD，EcmaScript 模塊規範不可用
• json: JSON 數據，使用 require 和 import 導入 JSON 數據時可用 （.json 文件的默認值）
• webassembly/experimental: WebAssembly 模塊 (.wasm 文件的默認值，目前還是試驗階段）
• 另外 webpack 支持直接查找 .wasm, .mjs, .js 和 .json 後綴文件

最讓人激動的是，我們甚至可以支持 CSS 和 HTML 模塊類型（計劃在 webpack 4.x - 5 間版本實現）。 它將允許我們直接將 HTML 作為入口文件！

?? 如果你正在使用 HtmlWebpackPlugin

在發布之前我們預留了一個月的時間 來升級所有的插件和 loader 以適配 webpack 4 的 API。然而，Jan Nicklas 因為工作原因沒辦法參加，因此我們不得不發布了一個 html-webpack-plugin 的 fork 版。你可以使用如下命令安裝它：

$> yarn add html-webpack-plugin@webpack-contrib/html-webpack-plugin

當 Jan 本月底從海外工作回來時，我們會將我們的更新合併回 jantimon/html-webpack-plugin 倉庫中！在此之前，如果你有任何問題，可以提交到這裡！

如果你是插件或 loader 的開發者，你可以查看我們的遷移指南：webpack 4: 插件/loader 遷移指南。

?? 還有！

還有更多的特性沒有在本文列出，我們強烈建議大家去看一下我們的官方更新日誌。

?? v4 的文檔在哪？

我們馬上要完成遷移指南和v4 的文檔了。你可以訪問 文檔倉庫 切換到 next 分支來獲取更新情況，當然能搭把手幫個忙是再好不過了！

?? 各框架 cli 工具支持怎麼樣了?

在過去的一個月我們也為每個框架的腳手架工作確保它們能支持 webpack 4。甚至最流行的庫例如 lodash-es, RxJS 已經支持 sideEffects 選項，因此使用它們的最新版後你會發現打包體積會大幅度的減小。

AngularCLI 團隊已經計劃在近幾周即將發布的大版本中直接使用 webpack 4！如果你想要知道最新進展，可以直接聯繫他們，並詢問他們你能幫什麼忙而不是直接詢問它什麼時候發布。

??為什麼你用如此多的 emoji 表情？

因為這樣寫文章很開心呀！大家也可以試試 ??。

?? 接下來？

我們已經在著手計划下一個版本 webpack 4.x 和 5 的特性了，包括但不限於：

• ESM 模塊導出支持
• 持久緩存
• WebAssembly 支持從 experimental 升級為 stable 穩定版。並增加 tree-shaking 和未使用代碼去除！
• Presets —— 基於零配置設計，任何東西都能支持零配置
• CSS 模塊類型——支持 CSS 作為入口文件（再見吧 ExtractTextWebpackPlugin）
• HTML 模塊類型——支持 HTML 作為入口文件
• URL/文件 模塊類型
• 自定義模塊類型
• 多線程
• 重新定義我們的組織章程和計劃任務
• Google Summer of Code (之後單獨寫問說明!!!)

?? 再次感謝 ??

對於我們的貢獻者團隊，核心團隊，loader 和插件作者，那些第一次提交他們的提交，或者幫助解決故障的人：我們不能不感謝你們。這個產品是為你而生的，你們幫助塑造了它。

2018 我們將註定要拋棄老古董思維，迎接 JS 的美麗復興！?

我之前已經多次強調過，在 JS 復興 的今天，沒有社區的幫忙，webpack 是不會變的如此強大，可持續以及蓬勃的生長。如果沒有你們的幫助，webpack 可能現在也還只是另外一款普通的構建工具[Yet Another Build Tool (YABT)]而已。

推薦閱讀：