摘要：重大改變環(huán)境不再支持。它們允許在使用動態(tài)表達(dá)式時過濾文件?？梢允褂盟鼇韯?chuàng)建相對于應(yīng)用程序根目錄的東西啟用時，將標(biāo)志添加到上下文已替換為圖已更改之前以父子關(guān)系相關(guān)聯(lián)?，F(xiàn)在以父子關(guān)系相關(guān)聯(lián)。

環(huán)境（Environment）

不再支持Node.js 4。源碼更新到更高的ecmascript環(huán)境版本。

使用（Usage）

您現(xiàn)在必須在兩種模式之間選擇（使用mode 或--mode）：production 或 development

production 模式使用了各種默認(rèn)的優(yōu)化配置去生成已經(jīng)被優(yōu)化的包

development 支持 comments 和 hint，并啟用devtool 的 eval

production 不支持watching，development 針對快速增量重建進(jìn)行了優(yōu)化

production 還可以實現(xiàn)模塊連接（范圍提升 Scope Hoisting）

您也可以使用optimization.* 來做詳細(xì)配置（構(gòu)建您的自定義模式）

process.env.NODE_ENV 被自動設(shè)置為 production 或 development（僅在構(gòu)建的代碼中，而不在配置中）

有一個隱藏的無模式（--mode none）可以禁用所有內(nèi)容

語法（Syntax）

import() 始終返回命名空間對象。 CommonJS模塊包含在默認(rèn)導(dǎo)出中

如果您曾經(jīng)使用import() 導(dǎo)入CommonJs，這可能會破壞您的代碼

配置（Configuration）

您不再需要使用這些插件

NoEmitOnErrorsPlugin -> optimization.noEmitOnErrors（默認(rèn)情況下在生產(chǎn)模式下打開）

ModuleConcatenationPlugin -> optimization.concatenateModules（默認(rèn)情況下在生產(chǎn)模式下啟用）

NamedModulesPlugin - > optimization.namedModules（默認(rèn)情況下在開發(fā)模式下啟用）

CommonsChunkPlugin 被移除 -> optimization.splitChunks，optimization.runtimeChunk

JSON

webpack現(xiàn)在可以本地處理JSON

在將JSON通過loader轉(zhuǎn)換為JS時，您可能需要添加 type: "javascript / auto"

不使用loader 的情況下使用JSON 仍然有用

允許通過ESM語法導(dǎo)入JSON

通過 export 消除JSON模塊是沒用的（unused exports elimination for JSON modules）

優(yōu)化（Optimization）

升級 uglifyjs-webpack-plugin 到 v1

ES15 支持

模塊（Modules）

webpack 現(xiàn)在支持一下幾種模塊類型:

javascript/auto: ( webpack 3中的默認(rèn)值）啟用了所有模塊系統(tǒng)的Javascript模塊：CommonJS，AMD，ESM

javascript/esm: EcmaScript模塊，所有其他模塊系統(tǒng)都不可用

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

json: JSON數(shù)據(jù)，可通過require和import獲得

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

與javascript/auto 相比，javascript/esm 更嚴(yán)格地處理ESM：

導(dǎo)入的模塊需要存在導(dǎo)入名稱

動態(tài)模塊（non-esm，即CommonJs）只能通過默認(rèn)導(dǎo)入來導(dǎo)入，其他一切（包括 namespace import）都會發(fā)出錯誤

在.mjs 模塊中默認(rèn)為javascript/esm

WebAssembly 模塊

可以導(dǎo)入其他模塊（JS和WASM）

通過ESM導(dǎo)入驗證WebAssembly模塊的導(dǎo)出

嘗試從WASM導(dǎo)入不存在的導(dǎo)出時，您將收到警告/錯誤

只能在異步塊中使用。 它們在初始塊中不起作用（對Web性能不利）

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

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

優(yōu)化（Optimization）

sideEffects: false 在package.json 中被支持

sideEffects 在package.json中還支持glob表達(dá)式和glob表達(dá)式數(shù)組

使用JSONP數(shù)組而不是JSONP函數(shù) -> 異步腳本標(biāo)記支持，順序不再重要

引入了新的optimization.splitChunks 選項, 詳情: https://gist.github.com/sokra...

現(xiàn)在通過webpack 本身刪除了無用分支

之前：通過Uglify 刪除了無用代碼

現(xiàn)在：通過webpack刪除無用代碼（在某些情況下）

這可以防止在無用分支中發(fā)生import() 時崩潰

語法（Syntax）

import() 的magic comment支持webpackInclude 和webpackExclude。 它們允許在使用動態(tài)表達(dá)式時過濾文件。

使用System.import() 現(xiàn)在會發(fā)出警告

您可以設(shè)置Rule.parser.system: true 來禁用警告

您可以設(shè)置Rule.parser.system: false 來禁用System.import

配置（Configuration）

現(xiàn)在可以使用module.rules[].resolve 配置解析。它可以與全局配置合并

optimization.minimize 中已添加on/off 開關(guān)以切換最小化

optimization.minimize 中已添加minimizers 和options 配置

使用（Usage）

驗證了一些插件選項

CLI已移至webpack-cli，您需要安裝webpack-cli 才能使用CLI

ProgressPlugin（--progress）現(xiàn)在顯示插件名稱

至少對于遷移到新插件系統(tǒng)的插件是可以的

性能（Performance）

UglifyJs 現(xiàn)在默認(rèn)緩存（caches）和并行化（parallizes）

多項性能改進(jìn)，尤其適用于更快的增量重建

RemoveParentModulesPlugin的性能改進(jìn)

統(tǒng)計

統(tǒng)計信息可以顯示嵌套在連接模塊中的模塊

配置（Configuration）

為mjs，json和wasm擴展自動選擇模塊類型。 其他擴展需要通過module.rules[].type 來配置

不正確的options.dependencies 配置將拋出錯誤

sideEffects 可以通過module.rules覆蓋

output.hashFunction 可以是自定義散列函數(shù)的構(gòu)造函數(shù)

出于性能原因，您可以提供非加密哈希函數(shù)

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

運行時（Runtime）

塊（chunk）加載的錯誤現(xiàn)在包括更多信息和兩個新屬性類型（type）和請求（request）。

Devtool

從SourceMaps和eval中移除comment footer

在eval source map devtool plugin中添加include test 和exclude 支持

性能（Performance）

webpacks AST可以直接從loader傳遞給webpack，以避免額外的解析

未使用的模塊不再做不必要的串聯(lián)

添加一個ProfilingPlugin，用于編寫（Chrome）包含插件時序的配置文件

使用for of 而不是forEach

使用Map 和 Set 來代替Objects

使用includes 來代替indexOf

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

隊列中不會重復(fù)進(jìn)入相同的任務(wù)

默認(rèn)情況下，使用更快的md4哈希進(jìn)行散列

優(yōu)化（Optimization）

當(dāng)使用超過25個導(dǎo)出時，損壞的導(dǎo)出名稱會更短。

腳本標(biāo)簽不再是text/javascript和async，因為這是默認(rèn)值（節(jié)省幾個字節(jié)）

連接模塊現(xiàn)在產(chǎn)生的代碼更少

常量替換現(xiàn)在不需要__webpack_require__ 且省略了參數(shù)

默認(rèn)（Defaults）

webpack 默認(rèn)按此順序查找.wasm，.mjs，.js和.json 擴展名

output.pathinfo 現(xiàn)在默認(rèn)在development 模式下開啟

in-memory 緩存在production 中默認(rèn)關(guān)閉

entry 默認(rèn)指向路徑 ./src

在省略mode 選項時默認(rèn)使用production 模式

使用（Usage）

向SourceMapDevToolPlugin 添加詳細(xì)的進(jìn)度報告

刪除插件時提供有用的錯誤消息

統(tǒng)計（stats）

在統(tǒng)計中大小的顯示使用kiB 代替kB

入口點（entrypoints）默認(rèn)顯示在統(tǒng)計信息中

chunks 在統(tǒng)計中顯示<{parents}> >{children}< 和 ={siblings}=

添加buildAt 時間到統(tǒng)計中

統(tǒng)計json 文件包含輸出路徑

語法（Syntax）

上下文（context）中支持資源查詢

在import() 中引用入口點（entry point）名稱現(xiàn)在會發(fā)出錯誤而不是警告

升級到acorn 5 并支持ES 2018

插件（Plugins）

done 現(xiàn)在是異步鉤子

生成的注釋不在*/ 中中斷

webpack不再修改傳遞的選項對象（options object）

Compiler "watch-run" hook 現(xiàn)在作為 Compiler 的第一個參數(shù)

將output.chunkCallbackName 添加到schema 以允許配置Web Worker 模板

使用module.id/loaded 正確地避免了模塊鏈接（Module Concatentation）（Scope Hoisting）

OccurenceOrderPlugin 現(xiàn)在按正確的順序?qū)δK進(jìn)行排序（而不是顛倒）

調(diào)用Watching.invalidate時，會從觀察者讀取文件的時間戳

修正不正確的-！ 在post loaders中

添加run 和watchRun hooks for MultiCompiler

在ESM 中this 顯示undefined

VariableDeclaration 被正確識別為var，const或let

當(dāng)使用模塊類型為javascript/dynamic 或javascript/module 時，Parser現(xiàn)在使用正確的資源類型（module/script）解析源代碼。

不在當(dāng)buildMeta 為null的缺失模塊時崩潰

為electron targets 添加original-fs 模塊

HMRPlugin 可以在plugins 之外添加到Compiler 中

使用tap 調(diào)用替換了plugin 調(diào)用（新的插件系統(tǒng)）

將許多已棄用的插件遷移到新的插件系統(tǒng)API

為json模塊添加了buildMeta.exportsType: "default"

從Parser 中刪除無用的方法（parserStringArray，parserCalculatedStringArray）

移除清除BasicEvaluatedExpression 和多種類型的功能

使用Buffer.from 代替 new Buffer

避免使用forEach，使用for of 代替

使用neo-async 代替async

更新tapable 和enhanced-resolve 依賴關(guān)系到新的主要版本

使用prettier

移除 module.loaders

移除 loaderContext.options

移除 Compilation.notCacheable flag

移除 NoErrorsPlugin

移除 Dependency.isEqualResource

移除 NewWatchingPlugin

移除 CommonsChunkPlugin

全新的插件系統(tǒng)

plugin 方法向后兼容

插件中現(xiàn)在應(yīng)該使用Compiler.hooks.xxx.tap（，fn）

新的主要版本 - enhanced-resolve

Templates for chunks 現(xiàn)在可以生成多個資源（multiple assets）

Chunk.chunks/parents/blocks 不再是Arrays。 內(nèi)部使用Set，有方法可以訪問它

Parser.scope.renames 和 Parser.scope.definitions 不在使用 Objects/Arrays, 而是 Map/Sets

Parser 使用 StackedSetMap (類似LevelDB的數(shù)據(jù)結(jié)構(gòu)) 代替 Arrays

應(yīng)用插件時不再設(shè)置Compiler.options

由于重構(gòu)，Harmony Dependencies已經(jīng)改變

Dependency.getReference() 現(xiàn)在可能返回一個weak 屬性。Dependency.weak 現(xiàn)在由Dependency 基類使用，并在getReference() 的基本impl中返回

所有Module 的構(gòu)造函數(shù)參數(shù)都已更改

將選項合并到ContextModule 和resolveDependencies的options對象中

更改并重命名import() 的依賴項

將Compiler.resolvers 移動到可通過插件訪問的Compiler.resolverFactory 中

Dependency.isEqualResource 已替換為Dependency.getResourceIdentifier

Template 中的方法是靜態(tài)的

添加了一個新的RuntimeTemplate 類，并將outputOptions 和requestShortener 移動到此類

許多方法已更新為使用RuntimeTemplate

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

Module.meta 以及被替代為 Module.buildMeta

已添加Module.buildInfo 和Module.factoryMeta

Module 的某些屬性已移至新對象中

添加了指向context 選項的loaderContext.rootContext。 Loaders 可以使用它來創(chuàng)建相對于應(yīng)用程序根目錄的東西

啟用HMR時，將this.hot標(biāo)志添加到loader 上下文

buildMeta.harmony 已替換為buildMeta.exportsType: "namespace"

chunk 圖已更改：

之前：Chunks 以父子關(guān)系相關(guān)聯(lián)。

現(xiàn)在：ChunkGroups 以父子關(guān)系相關(guān)聯(lián)。 ChunkGroups 按順序包含Chunks

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

現(xiàn)在：AsyncDependenciesBlocks 引用單個 ChunkGroup

file/contextTimestamps 現(xiàn)在是Maps

map/foreach Chunks/Modules/Parents 方法已經(jīng)被 廢棄/移除

NormalModule 接受Constructor中的選項對象（options object）

為NormalModule 添加了必需的生成器參數(shù)

為NormalModuleFactory 添加了createGenerator 和generator hooks 以自定義代碼生成

允許通過鉤子自定義Chunks 的渲染清單

webpack 4.0.0 release notes github原文