都是我從官方文檔裏拼本身理解翻譯過來的,藉助翻譯工具應該大概解析出來,可是能力強的仍是建議直接查看文檔,畢竟我也不強,怕誤導意思javascript
changelog-v5css
這一發布集中在如下方面:html
=> see here for a migration guide <=前端
全部在v4中被廢棄的功能都被移除。java
遷移: 確保你的webpack4項目沒有打印棄用警告node
這也有一些被廢棄可是在v4中沒有打印警告的東西react
新的廢棄包括一個依賴代碼以便於他們更容易被引用webpack
require.include
已經被廢棄,當使用的時候會默認發出警告git
可使用Rule.parser.requireInclude
去改變行爲: 容許, 廢棄或者禁止github
在早期的時候,webpack的目標是容許大多數的nodejs模塊在瀏覽器中運行,可是隨着模塊格局的改變,如今許多的模塊使用都是爲了前端的目的而編寫,v<=4爲許多的nodejs核心模塊提供填充,一旦一個模塊使用了任何的核心模塊就會自動應用這些填充(i.e. the crypto
module).
雖然這使使用爲nodejs而編寫的模塊變得更簡單,可是它添加了巨大的填充到bundle中,但大多數狀況下它們並非必要的
v5中止自動填充這些模塊而專一於前端兼容模塊
遷移:
browser
字段讓包兼容,爲瀏覽器提供替代的實現/依賴關係新增新的算法去實現長期緩存.這在生產環境被默認啓用
chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic"
這算法以肯定的方式將短(3或4字節)數字IDs分配給模塊和快,短(2字節)名稱分配給導出,這是在塊體積和長期緩存之間的權衡.
moduleIds/chunkIds/mangleExports: false
禁止默認行爲,能夠經過插件提供自定義算法。.注意在v4中moduleIds/chunkIds: false
沒有自定義插件進行工做構建,而在v5你必須提供一種
遷移: 最好是使用chunkIds
, moduleIds
andmangleExports
,你也能夠選擇性使用舊的默認值: chunkIds: "size", moduleIds: "size", mangleExports: "size"
,這會生成更小的塊,可是更常讓長期緩存失效
注意: 在v4哈希模塊id下降了gzip的性能,這與更改的模塊命令有關,已經被修復了
注意: 在v5deterministic
id在生產環境默認被啓用
v5如今當使用[contenthash]
會使用文件內容的真正散列,在此以前只是使用內部結構的散列,這隻有在註釋改變或者變量重命名纔會對長期緩存產生積極影響.而這些更改在壓縮以後是不可見的
開發模式中默認啓用的新命名塊id算法爲塊(和文件名)提供可讀的名稱。模塊ID是由其相對於上下文的路徑決定的。塊ID由塊的內容決定。
這樣你就不用再用import(/* webpackChunkName: "name" */ "module")
去調試,可是,若是您但願爲生產環境控制文件名,那麼它仍然是有意義的。
在生產環境中可使用 chunkIds:「named」
,但要確保不要意外地暴露有關模塊名稱的敏感信息。
遷移:若是您不喜歡在開發中更改文件名,您能夠經過 chunkIds: "natural"
來使用舊的數字模式。
Webpack 5增長了一個名爲「模塊聯合」的新特性,它容許多個Webpack構建版本一塊兒工做。從運行時的角度來看,造成多個構建的模塊就像一個巨大的鏈接模塊圖。從開發人員的指望模塊能夠從指定的遠程構建導入和使用最小的限制。
For more details see this separate guide.
JSON模塊如今與規範一致,若是使用了非默認導出會發出警告.JSON模塊從嚴格的EcmaScript模塊導入的時候再也不有命名導出
遷移: 使用默認導出
優化optimization.usedExports
刪除未使用的屬性,優化optimization.mangleExports
沒有邏輯的屬性
能夠在Rule.parser.parse
指定自定義的JSON序列化去引入類JSON文件(例如toml、yaml、json5等)。
v5如今原生支持資源模塊,這些模塊要麼將文件發送到輸出文件夾中,要麼將DataUri注入到javascript包中。不管哪一種方式,它們都提供一個URL來使用。
它們可以經由多種方式使用
import url from "./image.png"
,當匹配這些引入的時候須要在module.rules
設置type: "asset"
new URL("./image.png", import.meta.url)
所選擇的語法也容許在不使用bundler的狀況下運行代碼。
import.meta.webpackHot
是 module.hot
的別名,能夠在嚴格模式下執行import.meta.webpack
是webpack的主版本號import.meta.url
是當前文件的 file:
url (相似 __filename
不過是做爲文件路徑)當將資源的新URL與 new Worker
/new SharedWorker
/navigator.serviceWorker.register
組合時。webpack將自動爲web worker建立一個新的入口點。
new Worker(new URL("./worker.js", import.meta.url))
所選擇的語法也容許在不使用bundler的狀況下運行代碼。
Webpack 5支持處理請求中的協議。
data:
支持Base64或者被支持的原始編碼. 在module.rules
Mimetype能夠被映射到加載器和模塊類型 . 例如: import x from "data:text/javascript,export default 42"
file:
支持http(s):
支持, 但須要選擇經過 new webpack.experiments.schemesHttp(s)UriPlugin()
支持請求中的片斷:例如: ./file.js#fragment
v5支持所謂的"異步模塊", 這些模塊不是同步計算的,而是異步和基於promise的
經由import
引入它們會被自動處理不須要額外的語法,並且幾乎不存在明顯的差別
經由require引入它們會返回promise導出解析
在webpack有多種使用異步模塊的方式
Webpack 5增長了額外的external類型以涵蓋更多的應用程序:
promise
: 一種表達結果的承諾, 外部模塊是一個異步模塊,解析後的值用做模塊導出。
import
: 原生import
使用作加載指定的請求,而external模塊是一種異步模塊
script
: 經由<script>
加載一個url得到全局的導出變量(可選屬性), external模塊是一種異步模塊
package.json中的 exports
和import
字段如今支持。
Yarn PnP is supported natively.
See more details in TODO.
Webpack 5容許傳遞目標列表,也支持目標的版本。
例如: target: "node14"
target: ["web", "es2020"]
這是一個提供webpack須要肯定的全部信息的簡單方法:
測試數據格式已經改進可讀性和冗長性,默認值已經獲得了改進,變得更簡潔,也更適合大型構建。
stats.chunkRelations
切換.files
和auxiliaryFiles
.stats.ids
切換.stats.modulesSort
切換..stats.chunkModulesSort
切換.stats.nestedModulesSort
切換.stats.hash
切換.stats.builtAt
啓用. 它將在摘要中顯示時間戳。stats.children
.CLI --progress
使用的`ProgressPlugin
已經作了一些改進,但也能夠做爲插件手動使用。
它過去只計算處理過的模塊。如今它能夠計算 entries
dependencies
and modules
。全部這些如今都默認顯示。
它用於顯示當前處理的模塊。這致使了不少標準錯誤輸出,並在一些控制檯上產生了性能問題。如今默認狀況下禁用(activeModules選項)。這也減小了垃圾信息的數量在控制檯。如今,在構建模塊期間寫入標準錯誤的時間被限制爲500ms。
分析模式也獲得了升級,並將顯示嵌套進度消息的時間。這使得插件形成性能問題時更容易發現。
一種新的添加選項percentBy
告訴ProgressPlugin
怎麼計算進度比
new webpack.ProgressPlugin({ percentBy: "entries" });
爲了使進度百分比更準確,ProgressPlugin緩存最後已知的模塊總數,並在下一次構建中重用這個值。第一個版本將預熱緩存,但接下來的版本將使用並更新這個值。
在webpack 4中,多個webpack運行時可能在同一個頁面上發生衝突,由於它們使用相同的全局變量來加載塊。要解決這個問題,須要爲輸出提供一個自定義名稱output.jsonpFunction
配置。
Webpack 5會自動從package.json
name
推斷出構建的惟一名稱。並將其做爲output.uniqueName
的默認值。
此值用於使全部潛在衝突的全局變量惟一。
遷移:考慮刪除output.jsonpFunction
容許的狀況下v5會自動決定output.publicPath
v5會從源碼生成Typescript typings經過npm包暴露
遷移:刪除@types/webpack
。當名稱不一樣時更新引用。
webpack如今可以跟蹤訪問導出的嵌套屬性的訪問。這能夠在從新導出名稱空間對象時改進tree-shaking(消除未使用和混亂的導出)。
// inner.js export const a = 1; export const b = 2; // module.js import * as inner from "./inner"; export { inner } // user.js import * as module from "./module"; console.log(module.inner.a);
在本例中,能夠在生產模式中刪除導出b。
webpack 4沒有分析模塊導出和導入之間的依賴關係。webpack 5有一個新的選項優化optimization.innerGraph
在生產模式中默認啓用,它對模塊中的符號運行分析,以找出從導出到導入的依賴關係。
像這種模塊
import { something } from "./something"; function usingSomething() { return something; } export function test() { return usingSomething(); }
內部圖算法將計算出只有在使用測試導出時才使用某些內容,這能夠標記更多未使用的導出而且從塊中刪除
當設置sideEffects": false
會刪除更多的模塊,在這例子./something
當測試模塊未使用會被刪除
須要配置optimization.unusedExports
去得到更多關於未使用導出的信息
下面的符號會被分析
export default
/*#__PURE__*/
expressions反饋:若是你發如今這個分析中有什麼缺失,請報告一個問題,咱們考慮增長它。
使用eval()將對模塊進行此優化,由於evaled代碼能夠引用範圍內的任何符號。
這種優化也稱爲深度範圍分析。
webpack在分析CommonJs導出和require()調用時,能夠選擇不參加導出。
webpack 5增長了對一些CommonJs構造的支持,容許消除未使用的CommonJs導出,並從require()調用中跟蹤引用的導出名稱。
持如下構造:
exports|this|module.exports.xxx = ...
exports|this|module.exports = require("...")
(reexport)exports|this|module.exports.xxx = require("...").xxx
(reexport)Object.defineProperty(exports|this|module.exports, "xxx", ...)
require("abc").xxx
require("abc").xxx()
require()
a ESMflagged exportType (special handling for non-strict ESM import):
Object.defineProperty(exports|this|module.exports, "__esModule", { value: true|!0 })
exports|this|module.exports.__esModule = true|!0
當檢測到不可分析的代碼時,webpack會自動退出,而且徹底不跟蹤這些模塊的導出信息(出於性能緣由)。
Webpack 5如今可以(在默認狀況下)分析和優化每一個運行時模塊(一個運行時一般等於一個入口點)。這容許僅在真正須要導出的入口點中導出。入口點不會相互影響(只要每一個入口點使用運行時)
模塊鏈接也適用於每一個運行時,以容許對每一個運行時進行不一樣的鏈接。
模塊鏈接已經成爲第一類公民,任何模塊和依賴項如今均可以實現它。最初webpack 5已經增長了對外部模塊和json模塊的支持,很快就會推出更多。
export *
已經改良到跟蹤更多的信息而且再也不標記 default
導出使用
export *
當webpack檢測到衝突導出的時候展現警告
import()
容許經由神奇的註釋/* webpackExports: ["abc", "default"] */
手動tree shake模塊
咱們試圖經過改進兩種模式之間的類似性,在開發模式下的構建性能和避免僅用於生產的問題之間找到一個好的折衷。
Webpack 5在這兩種模式下都默認啓用了sideEffects
優化。在webpack 4中,因爲package.json中不正確的「反作用」標誌,這種優化致使了一些僅用於生產的錯誤。在開發中啓用這種優化能夠更快更容易地找到這些問題。
在許多狀況下,開發和生產發生在不一樣的操做系統上,文件系統的大小寫敏感性也不一樣,因此webpack 5在出現奇怪的大小寫問題時增長了一些警告/錯誤。
如今在輸出中有一些選項。如今的環境。它們容許指定哪一個EcmaScript特性能夠用於webpack生成的運行時代碼。
一般不直接指定該選項,而是使用target選項。
webpack 4過去只發出ES5代碼。webpack 5如今能夠同時生成ES5和ES6/ES2015代碼。
只支持現代瀏覽器將使用箭頭函數生成更短的代碼,使用const聲明生成更多的spec-comform代碼,使用TDZ做爲導出默認值。
target
option在webpack 4中,target
是在「web」和「node」(以及其餘一些)之間作出很是粗糙的選擇。Webpack 5提供了更多的選項。
目標選項如今對生成代碼的影響比之前更多:
externals
global, __filename, __dirname
)browser
field, exports
and imports
條件)在web
和node
之間作出對於這些事情的選擇很是粗糙,咱們須要更多信息.所以,咱們容許指定最小版本,例如「node10.13」,並推斷有關目標環境的更多屬性。
如今容許使用一個數組合並多個target.webpack會決定全部target的最低屬性配置,當使用不提供完整信息的目標(如「web」或「節點」(沒有版本號))時,使用數組也頗有用。例如["web", "es2020"]
結合這兩個部分目標。
有一個目標「browserslist」,它將使用browserslist數據來肯定環境的屬性。當項目中有可用的browserslist配置時,默認也會使用此目標。當沒有可用的配置時,「web」目標將被默認使用。
有些組合和特性還沒有實現,將致使錯誤。它們是爲未來的特性作準備。例子:
["web", "node"]
將致使一個通用的塊加載方法,這是還沒有實現["web", "node"]
+ output.module: true
將致使模塊塊加載方法,這是還沒有實現"web"
將會致使 http(s):
導入被視爲外部模塊, 這是還沒有實現 (應變方法: externalsPresets: { web: false, webAsync: true }
, 這會使用 import()
替代).模塊如今以一種比顯示單個數字更好的方式表示大小。此外,如今有不一樣類型的尺寸。
SplitChunksPlugin如今知道怎麼用minSize
和maxSize
去處理那些不一樣尺寸,默認只有Javascript
尺寸會被處理,不過你能夠用多個值去管理他們
minSize: { javascript: 30000, style: 50000, }
遷移:檢查構建中使用的大小類型,並在splitChunks中配置它們。minSize
和splitChunks.maxSize
可選。
這是一種文件系統緩存,能夠選擇性的再如下配置使用
cache: { // 1. Set cache type to filesystem type: "filesystem", buildDependencies: { // 2. Add your config as buildDependency to get cache invalidation on config change config: [__filename] // 3. If you have other things the build depends on you can add them here // Note that webpack, loaders and all modules referenced from your config are automatically added } }
重要提示:
默認狀況下,webpack假設只有包管理器修改了webpack所在的node_modules
目錄。node_modules
跳過了散列和時間戳。相反,出於性能緣由,只使用包名和版本,符號連接(如npm/yarn link)是好的。不要直接編輯node_modules
中的文件,除非您選擇不使用snapshot.immutablePaths: []
進行此優化。當使用Yarn PnP webpack假設yarn緩存是不可變的(它一般是)。您可使用snapshot.immutablePaths: []
選擇退出此優化。
緩存將存儲在node_modules/.cache/webpack
(當使用node_modules時)resp. .yarn/.cache/webpack
(當使用Yarn PnP時)。你可能永遠都不須要手動刪除它。
許多內部插件也會使用持久緩存。示例:SourceMapDevToolPlugin
(緩存生成的SourceMap), ProgressPlugin
(緩存大量模塊)
持久緩存將根據使用狀況自動建立多個緩存文件,以優化對緩存的讀寫訪問。
Compiler如今須要在使用完以後關閉,Compiler在進入和離開idle的時候有針對它們狀態的鉤子,插件可能用這些鉤子去作不重要的工做(例如, 把持久緩存慢慢地存儲到硬盤). 在Compiler關閉以後 - 全部剩下的工做會被儘量快的完成,一個回調信號表示結束.
插件和它們各自的做者應該預料到一些使用者可能會忘記去關閉Compiler,因此,全部工做最終應該都在idle階段完成.當工做完成的時候應該阻止進程退出.
webpack()
在被傳遞迴調時自動調用 close
。
遷移:在使用node.js API時,確保調用Compiler.close
後關閉。
webpack一般會在第一次構建期間emit全部的輸出文件而在後面的增量構建(監聽)會跳過寫入沒改變的文件,假定webpack運行期間沒有其餘東西改變輸出文件
隨着持久緩存的增長,即便在重啓webpack進程時,也應該提供watch-like的體驗,可是,若是認爲即便在webpack不運行的狀況下,也沒有其餘東西改變輸出目錄,那就太過度了。
因此如今webpack如今會檢測在輸出目錄的現有文件並將它們的內容與內存中的輸出文件進行比較,只有當它們改變的時候纔會寫入文件,這隻會在第一次構建完成,任何增量構建老是在webpack運行進程生成新的資源寫入文件
咱們假定webpack和插件只有在內容發生改變纔會生成新的資源,緩存應該確保當輸入是相等的時候沒有新的資源生成,不聽從這個建議會下降性能
文件被標記immutable
(包括內容hash),當已存在相同名字的文件的時候將永遠不會被寫入,咱們假定當文件內容改變的時候內容hash會被改變,這一般是對的,但在webpack或者插件開發階段不老是正確
在webpack 4中,一些特性是不可用的,例如Node.js目標。其中一些如今已經能夠了。
因爲沒法加載多個初始文件,node.js不能在初始塊中進行SplitChunks。如今是可能的。入口文件如今將加載附加文件和運行時chunk。
只容許啓動單個文件的目標(如node、WebWorker、electron main)如今支持由運行時自動加載引導所需的依賴部分。
這容許使用 splitChunks
chunks: "all"
來處理這些目標」。
注意,因爲塊加載是異步的,這使得初始計算也異步。當使用output.library
會是一個問題,由於導出值如今是一個Promise, 因爲alpha.14這不適用於target: "node"
, 由於chunk加載是同步
enhanced-resolve
更新到v5, 有下面提提高:
false
如今是可能的不包含JS代碼的塊,將再也不生成JS文件。
並非全部的特性都從一開始就是穩定的。在webpack 4中,咱們添加了一些實驗性的特性,並在更新日誌中指出這些特性還處於試驗階段,但從配置中並不老是能清楚地看出這些特性是否還處於試驗階段。
在webpack 5中有一個新的experiments
配置選項,它容許啓用實驗特性。這能夠清楚地說明哪些選項是啓用的/使用的。
雖然webpack遵循語義版本控制,但它會對實驗性特性進行例外處理。在小型webpack版本中,實驗性的特性可能包含破壞性的變化。當發生這種狀況時,咱們將在更改日誌中添加一個明確的說明。這將容許咱們更快地迭代實驗特性,同時也容許咱們在主要版本上停留更長的時間以得到穩定的特性。
webpack 5將附帶如下實驗:
experiments.syncWebAssembly
)新的WebAssembly支持根據更新的規範( experiments.asyncWebAssembly
)
Top Level Await 階段3草案 (experiments.topLevelAwait
)
await
將使模塊成爲異步模塊Emitting bundle as module (experiments.outputModule
)
<script type="module">
延遲加載,並在模塊模式下最小化注意,這也意味着默認狀況下禁用WebAssembly支持。
最小支持的node.js版本從6增長到10.13.0(LTS)。
遷移:升級到可用的最新node.js版本。
entry: {}
allows an empty object now (to allow to use plugins to add entries)target
supports an array, versions and browserslistcache: Object
removed: Setting to a memory-cache object is no longer possiblecache.type
added: It's now possible to choose between "memory"
and "filesystem"
New configuration options for cache.type = "filesystem" added:
cache.cacheDirectory
cache.name
cache.version
cache.store
cache.hashAlgorithm
cache.idleTimeout
cache.idleTimeoutForIntialStore
cache.buildDependencies
snapshot.resolveBuildDependencies
addedsnapshot.resolve
addedsnapshot.module
addedsnapshot.managedPaths
addedsnapshot.immutablePaths
addedresolve.cache
added: Allows to disable/enable the safe resolve cacheresolve.concord
removedresolve.alias
values can be arrays or false
nowresolve.restrictions
added: Allows to restrict potential resolve resultsresolve.fallback
added: Allow to alias requests that failed to resolveresolve.preferRelative
added: Allows to resolve modules requests are relative requests tooAutomatic polyfills for native node.js modules were removed
node.Buffer
removednode.console
removednode.process
removednode.*
(node.js native module) removedresolve.alias
and ProvidePlugin
. Errors will give hints. (Refer to node-libs-browser for polyfills & mocks used in v4)output.filename
can now be a functionoutput.assetModuleFilename
addedoutput.jsonpScriptType
renamed to output.scriptType
devtool
is more strictfalse | eval | [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
optimization.chunkIds: "deterministic"
addedoptimization.moduleIds: "deterministic"
addedoptimization.moduleIds: "hashed"
deprecatedoptimization.moduleIds: "total-size"
removedDeprecated flags for module and chunk ids were removed
optimization.hashedModuleIds
removedoptimization.namedChunks
removed (NamedChunksPlugin
too)optimization.namedModules
removed (NamedModulesPlugin
too)optimization.occurrenceOrder
removedchunkIds
and moduleIds
optimization.splitChunks test no longer matches chunk name
(module, { chunkGraph }) => chunkGraph.getModuleChunks(module).some(chunk => chunk.name === "name")
optimization.splitChunks
minRemainingSize
was addedoptimization.splitChunks
filename
can now be a functionoptimization.splitChunks
sizes can now be objects with a size per source typeminSize
minRemainingSize
maxSize
maxAsyncSize
maxInitialSize
optimization.splitChunks
maxAsyncSize
and maxInitialSize
added next to maxSize
: allows to specify different max sizes for initial and async chunksoptimization.splitChunks
name: true
removed: Automatic names are no longer supportedchunkIds: "named"
will give your files useful names for debuggingoptimization.splitChunks.cacheGroups[].idHint
added: Gives a hint how the named chunk id should be chosenoptimization.splitChunks
automaticNamePrefix
removedidHint
insteadoptimization.splitChunks
filename
is no longer restricted to initial chunksoptimization.splitChunks
usedExports
added to include used exports when comparing modulesoptimization.splitChunks.defaultSizeTypes
added: Specified the size types when using numbers for sizesoptimization.mangleExports
addedoptimization.minimizer
"..."
can be used to reference the defaultsoptimization.usedExports
"global"
value added to allow to disable the analysis per runtime and instead do it globally (better performance)optimization.noEmitOnErrors
renamed to optimization.emitOnErrors
and logic invertedoptimization.realContentHash
addedoutput.devtoolLineToLine
removedoutput.chunkFilename: Function
is now allowedoutput.hotUpdateChunkFilename: Function
is now forbidden: It never worked anyway.output.hotUpdateMainFilename: Function
is now forbidden: It never worked anyway.output.importFunctionName: string
specifies the name used as replacement for import()
to allow polyfilling for non-suppored environmentsoutput.charset
added: setting it to false omit the charset
property on script tagsoutput.hotUpdateFunction
renamed to output.hotUpdateGlobal
output.jsonpFunction
renamed to output.chunkLoadingGlobal
output.chunkCallbackFunction
renamed to output.chunkLoadingGlobal
output.chunkLoading
addedoutput.enabledChunkLoadingTypes
addedoutput.chunkFormat
addedmodule.rules
resolve
and parser
will merge in a different way (objects are deeply merged, array may include "..."
to reference to prev value)module.rules
parser.worker
added: Allows to configure the worker supportedmodule.rules
query
and loaders
were removedmodule.rules
options
passing a string is deprecatedmodule.rules
mimetype
added: allows to match a mimetype of a DataUrimodule.rules
descriptionData
added: allows to match a data from package.jsonmodule.defaultRules
"..."
can be used to reference the defaultsstats.chunkRootModules
added: Show root modules for chunksstats.orphanModules
added: Show modules which are not emittedstats.runtime
added: Show runtime modulesstats.chunkRelations
added: Show parent/children/sibling chunksstats.errorStack
added: Show webpack-internal stack trace of errorsstats.preset
added: select a presetstats.relatedAssets
added: show assets that are related to other assets (e. g. SourceMaps)stats.warningsFilter
deprecated in favor of ignoreWarnings
BannerPlugin.banner
signature changeddata.basename
removed
data.query
removedfilename
SourceMapDevToolPlugin
lineToLine
removed[hash]
as hash for the full compilation is now deprecated[fullhash]
instead or better use another hash option[modulehash]
is deprecated[hash]
instead [moduleid]
is deprecated[id]
instead [filebase]
removed[base]
insteadNew placeholders for file-based templates (i. e. SourceMapDevToolPlugin)
[name]
[base]
[path]
[ext]
externals
when passing a function, it has now a different signature ({ context, request }, callback)externalsPresets
addedexperiments
added (see Experiments section above)watchOptions.followSymlinks
addedwatchOptions.ignored
can now be a RegExpwebpack.util.serialization
is now exposed.target
is now "browserslist"
by default when a browserslist config is availablemodule.unsafeCache
is now only enabled for node_modules
by defaultoptimization.moduleIds
defaults to deterministic
in production mode, instead of size
optimization.chunkIds
defaults to deterministic
in production mode, instead of total-size
optimization.nodeEnv
defaults to false
in none
modeoptimization.splitChunks.minSize
defaults to 20k
in productionoptimization.splitChunks.enforceSizeThreshold
defaults to 50k
in productionoptimization.splitChunks
minRemainingSize
defaults to minSizeoptimization.splitChunks
maxAsyncRequests
and maxInitialRequests
defaults was been increased to 30optimization.splitChunks.cacheGroups.vendors
has be renamed to optimization.splitChunks.cacheGroups.defaultVendors
optimization.splitChunks.cacheGroups.defaultVendors.reuseExistingChunk
now defaults to true
resolve(Loader).cache
defaults to true
when cache
is usedresolve(Loader).cacheWithContext
defaults to false
resolveLoader.extensions
remove .json
node.global
node.__filename
and node.__dirname
defaults to false
in node-target
sstats.errorStack
defaults to false
this.getOptions
這個新的API應該簡化加載器中選項的使用。它容許經過一個JSON模式進行驗證。詳情請參見https://github.com/webpack/we...
下面的變化只與插件做者相關:
webpack 5中的插件如今在缺省配置被應用以前就已經被應用了。這容許插件應用它們本身的默認值,或者充當配置預置。
但這也是一個破壞性的改變,由於插件在應用時不能依賴於配置值的設置。
遷移:僅在插件掛鉤中訪問配置。或者最好避免訪問配置,並經過構造函數接受選項。
大部分運行時代碼被轉移到所謂的「runtime modules」中。這些特殊模塊負責添加運行時代碼.它們能夠添加到任何塊中,但當前老是添加到運行時塊中。「Runtime Requirements」控制將哪些運行時模塊(或核心運行時部分)添加到包中。這確保只有使用的運行時代碼被添加到包中。未來,運行時模塊還能夠添加到按需加載塊中,以便在須要時加載運行時代碼
在大多數狀況下,核心運行時容許內嵌入口模塊,而不是用`__webpack_require__
調用它。若是包中沒有其餘模塊,那麼就不須要其餘的__webpack_require__
了.這與模塊鏈接很好地結合在一塊兒,即將多個模塊鏈接成單個模塊。
在最好的狀況下,根本不須要運行時代碼。
遷移:若是你將運行時代碼注入到webpack運行時的插件中,能夠考慮使用RuntimeModules。
添加了一個序列化機制來容許webpack中複雜對象的序列化,它具備可選擇的語義,所以應該被序列化的類須要顯式地標記(並實現它們的序列化).對於大多數模塊,全部依賴項和一些錯誤已經這樣作了。
遷移:在使用自定義模塊或依賴項時,建議將它們序列化,以便從持久緩存中獲益
添加了帶有插件接口的緩存類。這個類可用於對緩存進行讀寫。根據配置的不一樣,不一樣的插件能夠向緩存添加功能。
MemoryCachePlugin
添加內存緩存,FileCachePlugin
添加持久(文件系統)緩存
FileCachePlugin
使用序列化機制來向/從磁盤中持久化和恢復緩存項
帶有鉤子的類會凍結它們的鉤子對象,所以再也不可能以這種方式添加自定義鉤子。
遷移:推薦的添加自定義鉤子的方法是使用WeakMap和靜態 getXXXHooks(XXX)
(即 getCompilationHook(compile)
)方法。內部類使用與自定義鉤子相同的機制。
webpack 3插件的兼容層已經被刪除。它已經被webpack 4棄用了
一些較少使用的tapable api被刪除或棄用。
遷移:使用新的tapable API。
在密封過程的幾個步驟中,有多個不一樣階段的掛鉤。即。optimizeDependenciesBasic` `optimizeDependencies` and `optimizeDependenciesAdvanced
,這些已經被移除,取而代之的是一個能夠與stage
選項一塊兒使用的單一鉤子。有關可能的階段,請參閱 OptimizationStages
。
遷移:將鉤子掛入剩餘的鉤子。你能夠添加一個 stage
選項。
Bundle模板已經被重構。MainTemplate/ChunkTemplate/ModuleTemplate被棄用,JavascriptModulesPlugin如今負責JS模板的處理。
在重構以前,JS的輸出由Main/ChunkTemplate處理,而另外一個輸出(如WASM、CSS)由插件處理。看起來JS是第一類,而另外一個輸出是第二類。重構改變了全部的輸出都由它們的插件處理。
仍然能夠鏈接到模板的某些部分。這些鉤子如今在JavascriptModulesPlugin中,而不是Main/ChunkTemplate中。(是的,插件也能夠有鉤子。我稱它們爲附着的鉤子。)
有一個編譯層,因此Main/Chunk/ModuleTemplate仍然存在,但只委託tap調用到新的鉤子位置。
遷移:遵循棄用消息中的建議。大多指向不一樣位置的鉤子。
若是一個對象做爲入口點被傳遞,它的值多是一個字符串,字符串數組或者一個描述符:
module.exports = { entry: { catalog: { import: './catalog.js', } } };
描述符語法能夠用來向入口點傳遞其餘選項。
默認狀況下,從output.filename
提取條目塊的輸出文件名。可是你能夠爲一個特定的條目指定一個自定義輸出文件名:
module.exports = { entry: { about: { import: './about.js', filename: 'pages/[name][ext]' } } };
默認狀況下,每一個entry chunk存儲它使用的全部模塊。經過dependOn
-option,您能夠從一個entry chunk到另外一個共享模塊:
module.exports = { entry: { app: { import: './app.js', dependOn: 'react-vendors' }, 'react-vendors': ['react', 'react-dom', 'prop-types'] } };
app chunk 將不包含react-vendors
擁有的模塊。
入口描述符容許爲每一個入口點傳遞不一樣的library
選項。
module.exports = { entry: { commonjs: { import: './lib.js', library: { type: "commonjs-module" } }, amd: { import: './lib.js', library: { type: "amd" } } } };
入口描述符容許爲每一個入口指定runtime
, 當指定時,將建立具備此名稱的chunk,其中僅包含該入口的runtime代碼,當多個入口指定相同的runtime
,該chunk將爲全部這些入口包含一個公共runtime,這意味着它們能夠一塊兒使用同一個html頁面
module.exports = { entry: { app: { import: './app.js', runtime: "app-runtime" } } };
條目描述符容許爲每一個入口指定一個 chunkLoading
。這個入口的運行時將使用它來加載塊。
module.exports = { entry: { app: { import: './app.js' }, worker: { import: './worker.js', chunkLoading: "importScripts" } } };
webpack用於在編譯階段以特定的方式對模塊和塊進行排序,以增量順序分配id。如今狀況已經不同了。order將再也不用於id生成,相反,id生成的徹底控制在插件中。
用來優化模塊和塊順序的鉤子被刪除了。
遷移:在編譯階段不能再依賴模塊和塊的順序。
有一個打印棄用警告的壓縮層。
遷移:使用Set而不是數組方法。
這個新類可用於以緩存的方式訪問關於文件系統的信息。目前,它容許請求文件和目錄時間戳。若是可能的話,時間戳的信息從監視器傳輸,不然由文件系統訪問決定。
在將來,請求文件內容哈希將被添加,模塊將可以檢查文件內容的有效性,而不是文件哈希。
遷移:使用file/fileSystemInfo
代替file/contextTimestamps
。
如今能夠對目錄進行imestamping,這容許對ContextModules進行序列化。
Compiler.modifiedFiles
已經添加了(在 Compiler.removedFiles
以後),以便更容易地引用更改後的文件。
在compiler.inputFileSystem
和compiler.outputFileSystem
以後。對於全部不被視爲輸入或輸出的fs操做,好比寫入記錄、緩存或分析輸出,有一個新的 compiler.intermediateFileSystem
文件系統如今有了fs接口,而且再也不須要額外的方法,如join或mkdirp。可是若是它們有像join或dirname這樣的方法,就會使用它們。
HMR runtime已被重構爲Runtime Modules。 HotUpdateChunkTemplate
已經合併到 ChunkTemplate
中。ChunkTemplates和插件如今也應該處理 HotUpdateChunks
。
HMR runtime的javascript部分已經從核心中分離出來。其餘模塊類型如今也能夠以本身的方式處理HMR。在將來,這將容許爲像mini-css-extract-plugin或WASM模塊提供。
遷移:因爲這是一個新引入的功能,因此不須要遷移。
import.meta.webpackHot
與 module.hot
公開相同的API。這也適用於嚴格的ESM模塊(.mjs, type: "module" in package.json)不訪問模塊。
webpack用函數調用函數的方式去處理模塊,以及限制併發的semaphore
。Compilation.semaphore
已經被移除,異步隊列如今處理工做排隊和處理。每一步都有一個單獨的隊列:
Compilation.factorizeQueue
: 爲一組依賴項調用模塊工廠Compilation.addModuleQueue
: 爲一組依賴項調用模塊工廠Compilation.buildQueue
: 若有必要,構建模塊(可能將模塊存儲到緩存中)Compilation.rebuildQueue
: 若是手動觸發,則再次構建模塊。Compilation.processDependenciesQueue
: 處理模塊的依賴關係。這些隊列有一些鉤子來監視和攔截做業處理。
未來,多個編譯器可能一塊兒工做,而job orchestration能夠經過攔截這些隊列來完成。
遷移:因爲這是一個新引入的功能,因此不須要遷移。
webpack內部如今包含了一些日誌記錄統計數據。可使用 stats.logging
and infrastructureLogging
選項來啓用這些消息。
webpack用於將解析後的模塊存儲在依賴項中,並將包含的模塊存儲在chunk中。如今狀況已經不同了。全部關於模塊圖中模塊如何鏈接的信息如今都存儲在ModuleGraph類中。全部關於模塊如何與chunk鏈接的信息如今都存儲在ChunkGraph類中。依賴於塊圖的信息也存儲在相關類中。
這意味着如下關於模塊的信息已經被移動
webpack過去從緩存中恢復斷開模塊與圖的鏈接這已經沒有必要了。模塊不存儲關於圖形的信息,這能夠在技術上用於多個圖形。這使得緩存更容易。
大多數更改都有一個兼容層,在使用時它會打印一個棄用警告。
遷移:使用ModuleGraph和ChunkGraph上的新api
DependenciesBlockVariables
變量被移除,取而代之的是InitFragments。
DependencyTemplates
如今能夠添加InitFragments
來將代碼注入到模塊源代碼的頂部。InitFragments
容許刪除重複數據。
遷移:使用InitFragments而不是在一個負索引處插入一些東西到源中。
模塊如今必須經過 Module.getSourceTypes()
來定義它們支持的源類型。根據這一點,不一樣的插件使用這些類型調用 source()
,也就是說,對於源代碼類型 javascript
, JavascriptModulesPlugin
將源代碼嵌入到包中。源類型 webassembly
將使 WebAssemblyModulesPlugin
發出一個wasm文件。還支持自定義源類型.也就是說,迷你css-extract-plugin可能會使用源代碼類型樣式表將源代碼嵌入到css文件中。
模塊類型和源類型之間沒有關係。即模塊類型 json
也使用源類型 javascript
和模塊類型 webassembly/experimental
使用源類型 javascript
和webassembly
。
遷移:自定義模塊須要實現這些新的接口方法。
如今的Stats preset
, default
, json
and toString
都是經過插件系統來實現的。將當前狀態轉換爲插件。
遷移:您如今能夠自定義它,而不是替換整個Stats功能。如今能夠將額外的信息添加到stats json中,而不是編寫單獨的文件。
webpack使用的觀察者被重構了。它之前使用 chokidar
和本機依賴 fsevents
(僅在OSX上)。如今它只基於本地node.js fs
。這意味着webpack中沒有原生依賴關係。
它還在監視時捕獲關於文件系統的更多信息。它如今能夠捕捉時光網時間,查看事件時間,以及丟失文件的信息。爲此,WatchFileSystem API作了一點改動。在它上面,咱們還將數組轉換爲集合,將對象轉換爲映射。
webpack如今替換了Compilation.assets
的源代碼。使用 SizeOnlySource
變量來減小內存使用的資源。
Multiple assets emit different content to the same filename
會警告錯誤
關於模塊導出信息的存儲方式已被重構。ModuleGraph如今爲每一個模塊提供了一個ExportsInfo,它存儲每一個導出的信息/它還存儲關於未知導出的信息,以及模塊是否僅以反作用的方式使用。
對於每一個導出,存儲如下信息:
optimization.usedExports
)optimization.providedExports
)optimization.mangleExports
)嵌套的導出信息,若是導出是一個自己附加了信息的對象
import * as X from "..."; export { X };
如今,編譯將代碼生成做爲單獨的編譯階段。它再也不隱藏在 Module.source()
or Module.getRuntimeRequirements()
裏面
這將使流程更乾淨。它還容許報告此階段的進展,並在分析時使代碼生成更加可見。
遷移: Module.source()
and Module.getRuntimeRequirements()
被廢棄,使用Module.codeGeneration()
替代
當ASI發生時,webpack會檢測到,並在沒有插入分號時生成更短的代碼.Object(...)
-> (0, ...)
webpack將多個導出getter合併到一個運行時函數調用中:
r.d(x, "a", () => a); r.d(x, "b", () => b);
-> r.d(x, {a: () => a, b: () => b});
webpack過去有一個方法和類型來表示依賴項的引用(Compilation.getDependencyReference
returning a DependencyReference
). 此類型用於包括關於此引用的全部信息,如已導入導出的被引用模塊,若是它是弱引用,還包括一些排序相關信息。
將全部這些信息捆綁在一塊兒使得獲取參考變得昂貴,並且每次人們須要一條信息時,它也常常被調用。
在webpack 5中,這部分代碼基被重構,方法被分解。
Dependency.getReferencedExports()
得到。Dependency
類上有一個weak
標誌HarmonyImportDependencies
相關,能夠經過 sourceOrder
屬性得到如今在 NormalModules
中有一種新的依賴類型:表示依賴
這些依賴關係只在代碼生成階段使用,而在模塊圖構建階段不使用。所以它們永遠不會有引用的模塊或影響導出/導入。
處理這些依賴關係的成本更低,webpack儘量使用它們
它將被廢棄。使用
alias: { xyz$: false }
或者使用絕對路徑 [path.resolve(__dirname, "....")]: false
Compiler.name
: 當生成帶有絕對路徑的編譯器名稱時,請確保使用|或!名字的兩個部分。
SystemPlugin
默認被禁用
Rule.parser.system: true
ModuleConcatenationPlugin
: 因爲DependencyVariables
已經被刪除,因此鏈接再也不被阻止
module
, global
, process
或ProvidePlugin的狀況下鏈接exec
從加載器上下文中刪除
Stats.presetToOptions
移除
compilation.createStatsOptions
替代SingleEntryPlugin
andSingleEntryDependency
移除
EntryPlugin
and EntryDependency
ExtendedAPIPlugin
移除
webpack_hash__
和webpack_chunkname__
能夠一直使用,運行時代碼被注入到須要的地方。ProgressPlugin
再也不爲reportProgress
使用tapable context
ProgressPlugin.getReporter(compiler)
替代ProvidePlugin
再次爲.mjs
文件啓用Stats
json errors
and warnings
再也不包含字符串,而是包含信息分解爲屬性的對象。
message
Compilation.hooks.normalModuleLoader
廢棄
NormalModule.getCompilationHooks(compilation).loader
替代NormalModuleFactory
鉤子已經從瀑布模型改爲流水模型, 改變和重命名返回瀑布函數的鉤子移除compilationParams.compilationDependencies
compilation.file/context/missingDependencies
插件能夠將依賴項添加到編譯中compilationDependencies.add
到 fileDependencies.add
stats.assetsByChunkName[x]
如今是數組__webpack_get_script_filename__
函數添加爲了得到script文件名getResolve(options)
會在加載器API用不一樣的方式合併選項參數,參考module.rules
resolve
package.json的sideEffects
會被glob-to-regex
處理取代micromatch
checkContext
從IgnorePlugin
移除__webpack_exports_info__
API容許導出usage introspectionRemoved deprecated features
CachePlugin
Chunk.entryModule
is deprecated, use ChunkGraph insteadChunk.hasEntryModule
is deprecatedChunk.addModule
is deprecatedChunk.removeModule
is deprecatedChunk.getNumberOfModules
is deprecatedChunk.modulesIterable
is deprecatedChunk.compareTo
is deprecatedChunk.containsModule
is deprecatedChunk.getModules
is deprecatedChunk.remove
is deprecatedChunk.moveModule
is deprecatedChunk.integrate
is deprecatedChunk.canBeIntegrated
is deprecatedChunk.isEmpty
is deprecatedChunk.modulesSize
is deprecatedChunk.size
is deprecatedChunk.integratedSize
is deprecatedChunk.getChunkModuleMaps
is deprecatedChunk.hasModuleInGraph
is deprecatedChunk.updateHash
signature changedChunk.getChildIdsByOrders
signature changed (TODO: consider moving to ChunkGraph
)Chunk.getChildIdsByOrdersMap
signature changed (TODO: consider moving to ChunkGraph
)Chunk.getChunkModuleMaps
removedChunk.setModules
removedChunkGraph
addedChunkGroup.setParents
removedChunkGroup.containsModule
removedChunkGroup.remove
no longer disconnected the group from blockChunkGroup.compareTo
signature changedChunkGroup.getChildrenByOrders
signature changedChunkGroupindex and index renamed to pre/post order index
ChunkTemplate.hooks.modules
signature changedChunkTemplate.hooks.render
signature changedChunkTemplate.updateHashForChunk
signature changedCompilation.hooks.optimizeChunkOrder
removedCompilation.hooks.optimizeModuleOrder
removedCompilation.hooks.advancedOptimizeModuleOrder
removedCompilation.hooks.optimizeDependenciesBasic
removedCompilation.hooks.optimizeDependenciesAdvanced
removedCompilation.hooks.optimizeModulesBasic
removedCompilation.hooks.optimizeModulesAdvanced
removedCompilation.hooks.optimizeChunksBasic
removedCompilation.hooks.optimizeChunksAdvanced
removedCompilation.hooks.optimizeChunkModulesBasic
removedCompilation.hooks.optimizeChunkModulesAdvanced
removedCompilation.hooks.optimizeExtractedChunksBasic
removedCompilation.hooks.optimizeExtractedChunks
removedCompilation.hooks.optimizeExtractedChunksAdvanced
removedCompilation.hooks.afterOptimizeExtractedChunks
removedCompilation.hooks.stillValidModule
addedCompilation.hooks.statsPreset
addedCompilation.hooks.statsNormalize
addedCompilation.hooks.statsFactory
addedCompilation.hooks.statsPrinter
addedCompilation.fileDependencies
, Compilation.contextDependencies
and Compilation.missingDependencies
are now LazySetsCompilation.entries
removedCompilation.entryDependencies
insteadCompilation._preparedEntrypoints
removeddependencyTemplates
is now a DependencyTemplates
class instead of a raw Map
Compilation.fileTimestamps
and contextTimestamps
removedCompilation.fileSystemInfo
insteadCompilation.waitForBuildingFinished
removedCompilation.addModuleDependencies
removedCompilation.prefetch
removedCompilation.hooks.beforeHash
is now called after the hashes of modules are createdCompiliation.hooks.beforeModuleHash
insteadCompilation.applyModuleIds
removedCompilation.applyChunkIds
removedCompiler.root
added, which points to the root compilerCompiler.hooks.afterDone
addedSource.emitted
is no longer set by the CompilerCompilation.emittedAssets
insteadCompiler/Compilation.compilerPath
added: It's a unique name of the compiler in the compiler tree. (Unique to the root compiler scope)Module.needRebuild
deprecatedModule.needBuild
insteadDependency.getReference
signature changedDependency.getExports
signature changedDependency.getWarnings
signature changedDependency.getErrors
signature changedDependency.updateHash
signature changedDependency.module
removedDependencyTemplate
MultiEntryDependency
removedEntryDependency
addedEntryModuleNotFoundError
removedSingleEntryPlugin
removedEntryPlugin
addedGenerator.getTypes
addedGenerator.getSize
addedGenerator.generate
signature changedHotModuleReplacementPlugin.getParserHooks
addedParser
was moved to JavascriptParser
ParserHelpers
was moved to JavascriptParserHelpers
MainTemplate.hooks.moduleObj
removedMainTemplate.hooks.currentHash
removedMainTemplate.hooks.addModule
removedMainTemplate.hooks.requireEnsure
removedMainTemplate.hooks.globalHashPaths
removedMainTemplate.hooks.globalHash
removedMainTemplate.hooks.hotBootstrap
removedMainTemplate.hooks
some signatures changedModule.hash
deprecatedModule.renderedHash
deprecatedModule.reasons
removedModule.id
deprecatedModule.index
deprecatedModule.index2
deprecatedModule.depth
deprecatedModule.issuer
deprecatedModule.profile
removedModule.prefetched
removedModule.built
removedModule.used
removedModule.getUsedExports
insteadModule.usedExports deprecated
Module.getUsedExports
insteadModule.optimizationBailout
deprecatedModule.exportsArgument
removedModule.optional
deprecatedModule.disconnect
removedModule.unseal
removedModule.setChunks
removedModule.addChunk
deprecatedModule.removeChunk
deprecatedModule.isInChunk
deprecatedModule.isEntryModule
deprecatedModule.getChunks
deprecatedModule.getNumberOfChunks
deprecatedModule.chunksIterable
deprecatedModule.hasEqualsChunks
removedModule.useSourceMap
moved to NormalModule
Module.addReason
removedModule.removeReason
removedModule.rewriteChunkInReasons
removedModule.isUsed
removedisModuleUsed
, isExportUsed
and getUsedName
insteadModule.updateHash
signature changedModule.sortItems
removedModule.unbuild
removedinvalidateBuild
insteadModule.getSourceTypes
addedModule.getRuntimeRequirements
addedModule.size
signature changedModuleFilenameHelpers.createFilename
signature changedModuleProfile
class added with more dataModuleReason
removedModuleTemplate.hooks
signatures changedModuleTemplate.render
signature changedCompiler.dependencies
removedMultiCompiler.setDependencies
insteadMultiModule
removedMultiModuleFactory
removedNormalModuleFactory.fileDependencies
, NormalModuleFactory.contextDependencies
and NormalModuleFactory.missingDependencies
are now LazySetsRuntimeTemplate
methods now take runtimeRequirements
argumentsserve
property is removedStats.jsonToString
removedStats.filterWarnings
removedStats.getChildOptions
removedStats
helper methods removedStats.toJson
signature changed (second argument removed)ExternalModule.external
removedHarmonyInitDependency
removedDependency.getInitFragments
deprecatedapply
initFragements
insteadHarmonyImportSpecifierDependency.redirectedId removed
setId
insteadTesting
async-node
node
web
webworker
store: "instant"
and store: "pack"
resolvedModuleId
resolvedModuleIdentifier
and resolvedModule
to reasons in Stats which point to the module before optimizations like scope hoistingresolvedModule
in Stats toString outputfile/context/missingDependencies
in Compilation
are no longer sorted for performance reasonsCompiler.assetEmitted
has an improved second argument with more informationminChunkSize
option from LimitChunkCountPlugin
reorganize from javascript related files into sub-directory
webpack.JavascriptModulesPlugin
-> webpack.javascript.JavascriptModulesPlugin
__system_context__
as context from System.js when using System.js as libraryTargetassetInfo
from emitAsset
will now merge when nested objects or arrays are used[query]
is now a valid placeholder when for paths based on a filename
like assetsCompilation.deleteAsset
to correctly delete an assets and non-shared related assetsrequire("webpack-sources")
as require("webpack").sources