webpack 4 測試版 —— 現在讓我們先一睹為快吧！

Fate_輕舞飛揚發表於2018-02-01
Web

?webpack 4 測試版 —— 現在讓我們先一睹為快吧！?

webpack 4 測試版 —— 現在讓我們先一睹為快吧！

為了支援數以百萬計的功能，用例和需求，它需要一個安全，穩定，可靠和可擴充的基礎。只有 webpack 具有無限的可能性。

穩定的釋出之路！

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

webpack 4 測試版 —— 現在讓我們先一睹為快吧！

可以使用 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 測試版 —— 現在讓我們先一睹為快吧！

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 !

Snipaste_2018-01-27_16-52-08.png

?支援 JSON 和 Tree Shaking

當你使用 ESModule 語法 import JSON 時，webpack 會消除 “JSON Module” 中未使用的匯出。對於那些已經將大量未使用模組的 JSON 匯入到你的程式碼的應用，你會看到 你打包體積明顯減小。

?升級到 UglifyJS2

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

我們要感謝 UglifyJs2 的貢獻者團隊為支援 ES6 而付出的無私和辛勤的努力。這不是一件簡單的任務，我們很樂意拜訪你們的程式碼倉庫來表達對你們的感謝和支援。

webpack 4 測試版 —— 現在讓我們先一睹為快吧！

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 中！

Snipaste_2018-01-27_16-54-02.png

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

非常感謝所有幫助我們完成 webpack 4 的貢獻者。正如我們所說，wepack 的成就是我們大家和生態系統的的共同努力造就的。

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

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

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

相關文章