webpack4.0測試版指南

自8月初以來—當咱們將 nex branch 合併到webpack/webpack#master—咱們看到了巨大的貢獻！

?今天，咱們很自豪地發佈webpack 4.0.0-beta.0來分享這項工做的成果！ ?

?A Promise Fulfilled — 可預測的發佈週期

當咱們完成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時，愈來愈多的人嘗試將reporting plugin和 loader程序不兼容，咱們就能夠構建一個生動的移植指南。

所以，咱們須要您查看 官方更改日誌 以及 咱們的遷移草案 並在咱們有遺漏的地方提供反饋! 這將幫助咱們的文檔團隊建立咱們的官方穩定版本遷移指南！

webpack 4有什麼新功能?

如下是一些您想要知道的以及一些更值得注意的功能. 有關更改功能和內部API修改的完整列表 請參閱咱們的更改日誌!!!

?性能

在webpack 4的多種場景中，性能將顯着加強。如下是咱們爲實現此目標而作出的一些顯着變化：

• 默認狀況下，在使用 production 模式時，咱們將自動並行化並緩存由UglifyJS完成的縮小工做。
• 咱們發佈了新版本的插件系統，以便事件掛鉤和處理程序是單態的。
• 此外，webpack如今已經放棄了對Node v4的支持，使咱們可以添加大量較新的ES6語法和數據結構，而且也經過V8進行了優化。到目前爲止，咱們已經看到9小時12分鐘的真實報道！

PS: 咱們甚至尚未實現全緩存和並行性 ? [webpack 5里程碑]

?更好的默認值 — #0CJS

直到今天，webpack一直要求您明確設置您的輸入和輸出屬性。使用webpack 4，webpack會自動假設您的入口屬性爲./src/，而且默認狀況下，bundle將輸出爲./dist。

這意味着 您再也不須要配置就能夠開始使用webpack!!

如今webpack是＃0CJS（Zero Configuration）開箱即用的打包程序，咱們將在4.x和5.0中奠基基礎，以便在未來提供更多的默認功能。

?更好的默認值  — mode

您如今必須在兩種模式之間選擇（模式或 - 模式）：「production」 或者「development」.」。

• 生產模式爲您提供各類優化。這包括縮小，範圍提高，抖動，無反作用的模塊修剪，而且包括必須像NoEmitOnErrorsPlugin同樣手動使用的插件。
• 開發模式針對速度和開發人員的體驗進以一樣的方式，咱們會自動在您的包輸出中包含路徑名稱等功能，eval-source-maps，這些功能是爲了易於閱讀代碼和快速構建！

?sideEffects —  bundle sizes的巨大勝利

咱們在package.json中引入了對sideEffects：false。添加此字段時，它會向webpack發送信號，代表庫中沒有正在使用的sideEffects。這意味着webpack能夠安全地消除代碼中使用的任何從新導出。

例如，僅從lodash-es做爲single_export_導入將花費約223 KiB [壓縮後]。在webpack 4中，這個代價如今是〜3 KiB！

?JSON Support & Tree Shaking

當您使用ESModule語法導入JSON時，webpack將從「JSON模塊」中消除未使用的導出。對於那些已經將大量未使用的片斷導入到代碼中的人來講，你會發現你的包的大小會顯着減少。

?升級到UglifyJS2

這意味着您可使用ES6語法，將其縮小，而無需第一個轉譯器。

咱們要感謝UglifyJs2團隊的貢獻者爲實現ES6支持所作的無私和努力工做。這不是一件容易的事情，咱們很樂意讓你去看看他們的 repository 並表達你的讚揚和支持

? Module Type的推出+ .mjs支持

歷史上，JavaScript是webpack中惟一的一流模塊類型。這給用戶帶來了不少尷尬的痛苦，他們沒法有效地使用CSS / HTML Bundle等。如今咱們從代碼庫中抽象出JavaScript特性，以容許這個新的API。咱們如今有5個模塊類型實現：

• javascript/auto:_（在webpack 3中的默認值_）_已啓用全部模塊系統的Javascript模塊：CommonJS，AMD，ESM
• javascript/esm: EcmaScript模塊，全部其餘模塊系統都不可用_（默認爲.mjs文件）_
• javascript/dynamic: 只有CommonJS和AMD; EcmaScript模塊不可用
• json: JSON數據，它能夠經過require和import （默認的.json文件）
• webassembly/experimental: WebAssembly模塊 （當前爲.wasm文件的實驗文件和默認文件）
• 此外，webpack如今按此順序查找.wasm，.mjs，.js和.json擴展名以解析

這個功能最使人興奮的是，如今咱們能夠繼續使用CSS和HTML模塊類型（4.x）。這將容許像HTML這樣的功能成爲您的入門點！

?WebAssembly支持

默認狀況下，Webpack支持導入和導出任何本地WebAssembly模塊。這意味着您還能夠編寫裝載器，以便您直接導入Rust，C ++，C和其餘WebAssembly主機lang文件：

?再見CommonsChunkPlugin

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

?還有更多！

還有更多的功能，咱們強烈建議您在咱們的 官方日誌中中查看全部功能。

⌚倒計時

按照承諾，咱們將從今天開始等待一個月，而後再釋放webpack 4穩定版。這爲咱們的插件，加載程序和集成生態系統提供了測試，報告和升級到webpack 4.0.0的時間！

咱們須要您幫助咱們升級並測試此測試版。咱們今天能夠測試的越多，咱們就能夠更快地進行分類並找出任何可能出現的問題！

很是感謝全部幫助咱們製做wepback 4的貢獻者。正如咱們老是說的那樣，webpack的威力是咱們的零件和生態系統的總和。

原文地址：https://medium.com/webpack/we...