webpack4.0正式版重大更新與特性詳細清單

翻譯：瘋狂的技術宅原文作者：sokra

重大更新

環境

不再支持Node.js 4。 源代碼已升級到更高版本的ecmascript。

用法

生產模式能夠實現各種優化來生成最佳方案的捆綁包

開發模式能夠在開發過程中注釋和提示，並使eval devtool

生產模式不支持watching，開發模式針對快速增量重建進行了優化

生產模式也使模塊連接合併（範圍提升）

你可以使用標誌對此進行詳細配置（構建您的自定義模式）

被設置為生產或開發（僅在構建的代碼中，而不是在配置中）

有一種隱藏的模式可以禁用所有的功能

你現在必須在兩種模式之間選擇（或）：生產模式或開發模式

句法

這如果使用導入 CommonJs 可能會破壞你的代碼，

總是返回一個命名空間對象。 CommonJS 模塊被封裝到默認導出中

配置

- >（在生產模式下默認打開）

- >（在生產模式下默認打開）

- >（開發模式默認打開）

不再需要使用這些插件：

移除 - >，

JSON

導出時消除未使用的JSON模塊

將JSON通過載入器轉換為JS時，可能需要添加

只使用JSON而無需載入器應該仍然有效

webpack現在原生處理JSON

允許通過ESM語法導入JSON

優化

將uglifyjs-webpack-plugin升級到v1

支持ES15

重要特性

模塊

可以導入其他模塊（JS和WASM）

來自WebAssembly模塊的導出通過ESM導入進行驗證

只能用於非同步塊。它們不起作用（對網路性能不利）

這是一個實驗性特徵和變化主題

嘗試從WASM導入不存在的導出時，您會收到警告/錯誤

使用WASM通過import()導入模塊

導入的名稱需要在導入的模塊上存在

動態模塊（非esm，即CommonJs）只能通過默認導入導入，其他所有（包括命名空間導入）都會發出錯誤

javascript/auto：（webpack 3中的默認版本）啟用了所有模塊系統的Javascript模塊：CommonJS，AMD，ESM

javascript/esm：EcmaScript模塊，所有其他模塊系統都不可用

javascript/dynamic：只有CommonJS和EcmaScript模塊不可用

json：JSON數據，可通過require和import獲取

webassembly/experimental：WebAssembly模塊（目前是實驗性的）

webpack現在支持這些模塊類型：

與相比，更嚴格地處理ESM：

在模塊默認為

模塊

優化

之前：Uglify刪除了死碼

現在：webpack刪除死碼（在某些情況下）

這可以防止處理死分支時發生崩潰

package.json中的還支持glob表達式和glob表達式的數組

現在在package.json中受支持

不使用JSONP函數，而是使用JSONP數組 ->非同步腳本標記支持，順序不再重要

引入了新的選項，詳情：https：//gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

死分支現在由webpack自己刪除

語法

和受到的魔法注釋的支持。 它們允許在使用動態表達式時過濾文件。

使用現在會發出警告

可以使用禁用警告

可以使用禁用

配置

默認情況下：在生產模式下打開，在開發模式下關閉

現在可以使用來配置解析。它與全局配置合併。

已添加到最小化開/關

已被添加到配置最小化器和選項

使用

至少對於遷移到新插件系統的插件

一些插件選項現在被驗證

CLI已遷移到webpack-cli，你需要安裝才能使用CLI

ProgressPlugin（）現在顯示插件名稱

性能

UglifyJs現在默認緩存和並行

多重性能改進，特別是對於更快的增量重建

改進了RemoveParentModulesPlugin的性能

統計

統計信息可以顯示嵌套在連接模塊中的模塊

特性

配置

模塊類型自動選擇為mjs，json和wasm擴展名。其他擴展需要通過進行配置

不正確的配置現在會拋出錯誤

可以通過覆蓋

現在可以是自定義散列函數的構造函數

出於性能方面的原因，你可以提供非cryto哈希函數

添加·output.globalObject·配置選項以允許在運行時exitCode中選擇全局對象引用

運行

現在，塊載入錯誤包含更多信息和兩個新的屬性類型和請求。

Devtool

從SourceMaps和eval中刪除注釋頁腳

為eva source mapl devtool插件添加對和的支持

性能

webpack AST可以直接從載入器傳遞給webpack以避免額外的解析

未使用的模塊不再不必要地連接起來

添加一個ProfilingPlugin，它寫入一個包含插件時間的（Chrome）配置文件

使用而不是

使用和而不是對象

使用而不是

用字元串方法替換了一些RegExp

Queue不會再次把同一個job存入隊列

默認情況下，使用更快的md4散列進行散列

優化

當使用超過25個exports時，exports名稱變短。

腳本標籤不再是和，因為這是默認值（保存幾個位元組）

串聯模塊現在生成更少的代碼

常量替換現在不需要，參數被忽略

默認

webpack現在按此順序查找，，和擴展名

現在默認處於開發模式

內存緩存默認情況下在生產中處於關閉狀態

默認為

默認為

省略模式選項時使用生產默認值

使用

向SourceMapDevToolPlugin添加詳細的進度報告

現在刪除的插件會提供一個有用的錯誤消息

統計

現在大小顯示為kiB而不是統計中的kB

現在默認情況下在統計信息中顯示入口點

塊在統計信息中顯示和

添加·buildAt`的時間統計

stats json現在包含輸出路徑

語法

上下文支持資源查詢

在中引用入口點名稱現在會發出錯誤而不是警告

升級到acorn 5並支持ES 2018

插件

是一個非同步鉤子

修復的Bug

生成的評論不再超出 * /

webpack不再修改傳遞的選項對象

編譯器「watch-run」鉤子現在具有編譯器作為第一個參數

將添加到模式以允許配置WebWorker模板

現在使用可以正確地從Module Concatentation（範圍提升）

現在按照正確的順序排序模塊（而不是顛倒過來）

調用時，將從觀察器讀取文件時間戳

修復在post載入器錯誤的行為

為MultiCompiler添加run和watchRun掛鉤

在ESM中未定義

VariableDeclaration被正確識別為，或

當模塊類型為或時，解析器現在使用正確的源類型（模塊/腳本）解析源代碼。

使用為null的缺失模塊不再崩潰

為electron targets添加模塊

HMRPlugin可以添加到編譯器之外的

內部變化

使用tap調用替換plug 調用（新插件系統）

將許多棄用的插件遷移到新的插件系統API

為json模塊添加了

從Parser中移除未使用的方法（parserStringArray，parserCalculatedStringArray）

移除了清除BasicEvaluatedExpression功能並具有多種類型

Buffer.from替代new Buffer

避免使用forEach並改為使用for

使用而不是

將tapable和enhanced-resolve依賴關係更新為新的主要版本

使用 prettier

移除的特性

插件/載入器的變化

新的插件系統

插件方法是向後兼容的

插件現在應該使用

新版本的增強型解決方案

塊的模板現在可以生成多個資源

不再是Arrays。在內部使用Set，並有方法來訪問它。

和不再是Objects/Arrays，而是Map/Sets。

解析器使用（類似於LevelDB的數據結構）而不是Arrays

在應用插件時不再設置

和諧相依性因重構而改變

現在可能返回一個弱屬性。現在由基類使用，並返回到的基本實現中

所有模塊的構造函數參數都已更改

將選項合併到和的選項對象中

更改並重命名的依賴關係

將移入可通過插件訪問的

已被替換為

上的方法現在是靜態的

已添加新的RuntimeTemplate類，並且和已移至此類

許多方法已經更新為使用RuntimeTemplate

我們計劃將訪問運行時的代碼移到這個新類中

已被替代

已添加和

的某些屬性已被移入新對象中

添加了指向上下文選項的。裝載器可以使用它來創建相對於應用程序根目錄的東西。

當啟用HMR時，將標誌添加到載入器上下文中

已被替換為

塊圖改變了：

之前：塊與父母 - 子女關係有關。

現在：ChunkGroups與父-子關係連接。 ChunkGroups按順序包含塊。

之前：AsyncDependenciesBlocks按順序引用Chunks列表。

現在：AsyncDependenciesBlocks引用一個ChunkGroup。

file / contextTimestamps 現在是Maps

方法現在已被棄用/刪除

NormalModule接受構造函數中的選項對象

為NormalModule添加了所需的生成器參數

為NormalModuleFactory添加了和器鉤子以自定義代碼生成

允許通過鉤子為塊定製渲染清單

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！