webpack 4正式釋出，速度最高可提升98%

發表於2018-02-27
Web

代號: _Legato

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

或者

為什麼叫 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/iframe/player.html?vid=y0559vc6zin&tiny=1&auto=1

如果想要了解更多該 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 版。你可以使用如下命令安裝它：

當 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)]而已。

via: https://medium.com/webpack/webpack-4-released-today-6cdb994702d4

相關文章