webpack 4 測試版 —— 如今讓咱們先一睹爲快吧！

• 原文地址：🚀webpack 4 beta — try it today!🚀
• 原文做者：Sean T. Larkin
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：FateZeros
• 校對者：kangkai124 MechanicianW

🚀webpack 4 測試版 —— 如今讓咱們先一睹爲快吧！🚀

爲了支持數以百萬計的功能，用例和需求，它須要一個安全，穩定，可靠和可拓展的基礎。只有 webpack 具備無限的可能性。

穩定的發佈之路！

自八月初以來 —— 當咱們從 **webpack/webpack#master** 中分出 **next** 分支的時候 —— 咱們看到了驚人的貢獻量涌入。

可使用 gitinspector 一目瞭然地查看 webpack next 分支上的 Git 貢獻統計信息。能夠在你的項目上嘗試一下，來仔細研究下。 PS：這還不包括咱們的 webpack-cli 團隊 和 webpack-contrib 組織，他們在支持加載器和插件上面作了大量的工做。

🎉 今天，咱們很自豪可以經過發佈 webpack 4.0.0 - beta.0 來分享這項工做的成果！ 🎉

🎁一個實現的承諾 —— 可預測的發佈週期

當咱們完成了 webpack 3 的發佈以後，咱們向社區保證，主要版本的更迭會有一個更長的開發週期。

咱們已經兌現了這個承諾[並繼續爲之付諸實施]，給大家帶來了一大套特性，改進和錯誤修復，咱們已經火燒眉毛地期待大家的實踐！開始吧！

🤷‍怎麼安裝 [v4.0.0-beta.0]

若是你用的是 yarn:

yarn add webpack@next webpack-cli --dev

或者 npm:

npm install webpack@next webpack-cli --save-dev

🛠怎麼遷移？

只有更多的人幫助測試 webpack 4，而且反饋不兼容的插件和加載器，咱們才能構建一份更加生動的遷移指南。

所以咱們須要你看看官方的更新日誌 還有咱們的遷移草案並提供咱們有所缺失的反饋！這將幫助咱們的文檔團隊建立咱們的官方穩定版本遷移指南！

webpack 4 中有什麼新功能呢？

下面就是一些你將會喜歡看到的更值得注意的功能。若想了解更新，功能和內部 API 修改的完整的清單,請參閱咱們的修改日誌

🚀更好的性能

在 webpack 4 的多個場景中，性能將顯着加強。下面是咱們爲實現這一目標而作出的一些顯著改動：

• 默認狀況下，在使用 production 模式時，咱們會使用 UglifyJS 自動並行編譯和緩存來減小工做量 。
• 咱們發佈了一個新版的插件系統以便事件鉤子和處理函數是單一形態的。
• 另外，webpack 現已放棄對 Node v4 的支持，使咱們可以添加大量的新型 ES6 語法和數據結構，而且也經過 V8 進行了優化。迄今爲止，咱們已經收到一些用戶報告說，構建時間由 9 小時減小到 12 分鐘！

PS: 咱們尚未徹底實現緩存和並行化 😉 這是[webpack 5 的里程碑]。

🔥更好的默認配置 —— 零配置

直到今天，webpack 一直要求你明確設置你的 entry 和 output 屬性。對於 webpack 4 ，webpack 會自動假設你的 entry 屬性是 ./src，而且打包會默認輸出到 ./dist 中。

這意味着 你開始使用 webpack 再也不須要一個配置！

webpack 4.0.0-beta.0 運行一個沒有配置的版本

如今 webpack 是一個零配置開箱即用的打包器，咱們將爲 4.x 和 5.0 奠基基礎，以便未來提供更多的默認功能。

💪更好的默認模式 —— mode

你如今必須在兩種模式之間選擇 (mode 或 --mode)：production 或 development

• 生產模式能夠爲你提供各類優化。這包含代碼壓縮，做用域提高，未引用模塊移除，無反作用模塊修剪，還包含引入一些像 NoEmitOnErrorsPlugin 這樣須要你手動使用的插件。
• 開發模式優化了開發速度和開發體驗。一樣，咱們會自動在你的包輸出中包含像路徑名，eval-source-maps 這樣的功能，以便閱讀代碼和快速構建！

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

咱們在 package.json 中引入了對 sideEffects: false 的支持。當這個字段被添加時，它向 webpack 發出信號，表示被使用的庫沒有反作用。這意味着 webpack 能夠安全地清除你代碼中使用的任何重複導出模塊。

例如，從 lodash-es 中單獨導入 export 將會花費 ~223 KiB [壓縮後的]。在 webpack 4 中，如今這隻花費 ~3 KiB !

🌳支持 JSON 和 Tree Shaking

當你使用 ESModule 語法 import JSON 時，webpack 會消除 「JSON Module」 中未使用的導出。對於那些已經將大量未使用模塊的 JSON 導入到你的代碼的應用，你會看到 你打包體積明顯減少。

😍升級到 UglifyJS2

這意味着你可使用 ES6 語法，壓縮它，而無需使用轉換器。

咱們要感謝 UglifyJs2 的貢獻者團隊爲支持 ES6 而付出的無私和辛勤的努力。這不是一件簡單的任務，咱們很樂意拜訪大家的代碼倉庫來表達對大家的感謝和支持。

UglifyJS2 如今支持 ES6 JavaScript 語法！

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

歷史上，JavaScript 是 webpack 中惟一的一流模塊類型。這給那些不能高效的打包 CSS/HTML 的用戶帶來了不少尷尬的痛苦。咱們徹底從咱們的代碼庫中抽象出了 JavaScript 特性，以容許這個新的 API。目前建成，咱們如今有5個模塊類型實現引入：

• javascript/auto: (在 webpack 3 默認啓用) 啓用了全部的 Javascript 模塊系統：CommonJS，AMD，ESM
• javascript/esm: EcmaScript 模塊，全部的其餘模塊系統不可用（默認 .mjs 文件）
• javascript/dynamic: 只有 CommonJS 和，EcmaScript 模塊不可用
• json: JSON 數據，它能夠經過 require 和 import 來引入使用（默認 .json 的文件）
• webassembly/experimental: WebAssembly模塊（當前爲 .wasm 文件的實驗文件和默認文件）
• 另外 webpack 如今支持查找 .wasm, .mjs, .js 和 .json 拓展文件來解析

**這個功能最讓人興奮的是，咱們能夠繼續使用 CSS 和 HTML 模塊模型 （4.x）。**這將容許像 HTML 這樣的功能做爲你的入口點！

🔬支持 WebAssembly

Webpack 如今默認支持任何本地 WebAssembly 模塊的 import 和 export。這意味着你也能夠寫加載器，讓你能夠直接 import Rust，C++，C 和其餘 WebAssembly 語言：

💀去除 CommonsChunkPlugin

咱們也刪除了 CommonsChunkPlugin，並默認啓用了它的許多功能。另外，對於須要對其緩存策略進行細粒度控制的用戶，咱們已經添加了 optimization.splitChunks 和 optimization.runtimeChunk 它們具備更豐富，更靈活的功能

💖還有更多！

還有不少的功能 咱們強烈建議你在咱們的官方更新日誌上查看全部。

⌚ 從如今開始倒計時

正如所承諾的那樣，咱們將從今天開始等待一個月，而後再發布 webpack 4 穩定版。 這使咱們的插件，加載器和集成生態系統有時間去測試，報告並升級到 webpack 4.0.0 中！

咱們須要你幫助咱們升級和測試這個測試版。咱們今天測試的越多，咱們就能夠更快的分診和識別任何可能出現的問題！

很是感謝全部幫助咱們完成 webpack 4 的貢獻者。正如咱們所說，wepack 的成就是咱們你們和生態系統的的共同努力造就的。

---

沒有時間幫忙貢獻？想要以其餘方式回饋？經過捐助給咱們的開放集體成爲 webpack 的支持者或贊助商。開放集體不只有助於支持核心團隊，也支持花費了大量空閒時間改善組織的貢獻者！ ❤

感謝Florent Cailhol, Tobias Koppers, 和John Reilly.

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。