使用 ?/* webpackChunkName: '...' */? 時

請確保你了解了其含義圖：

• 此處 chunk 的名稱本意是 public 的。
• 它不僅是用于開發(fā)模式的名稱。
• webpack 會在 production 以及 development 的模式中使用它對文件進行命名。
• 即使用不使用 ?webpackChunkName?，webpack 5也會自動在 ?development? 模式下分配有意義的文件名。

為 JSON 模塊使用工具名稱導出

新規(guī)中將不再支持下面這種方式，如此做會發(fā)出警告：

import { version } from './package.json';
console.log(version);

請使用如下方式替代：

import pkg from './package.json';
console.log(pkg.version);

清理構(gòu)造代碼

• 當使用 ?const compiler = webpack(...);? ，確保在使用完成后，使用?compiler.close(callback);? 關(guān)閉編譯器。
• 這不適合用于自動關(guān)閉的 ?webpack(..., callback)? 。
• 如果你在監(jiān)聽模式下使用webpack，直接連接到用戶綁定進程，此可選。在監(jiān)聽模式下面的空閑階段將被用于執(zhí)行此操作。

運行單個結(jié)構(gòu)并遵循以下建議

請事務(wù)必須仔細閱讀構(gòu)建時的錯誤/警告。如未發(fā)現(xiàn)相關(guān)建議，請創(chuàng)建一個issue，我們將盡全力解決。

重新按照下面步驟，直到你至少解決到 Level 3 或 Level 4：

• Level 1: 模型（Schema）校試失敗。

配置選項已更改。應(yīng)該要有校試失敗的信息并附上 ?BREAKING CHANGE:? 提示，或提示應(yīng)用哪一個選項。

• Level 2: webpack 異常退出并出現(xiàn)錯誤。

錯誤信息告訴你哪里需要進行修改。

• 等級3：構(gòu)建錯誤。

錯誤信息應(yīng)該要有 BREAKING CHANGE: 提示。

• Level 4: 構(gòu)建警告。

警告信息應(yīng)該告訴你哪里需要進行修改。

• Level 5: 運行時錯誤。

這很棘手，你可能需要調(diào)試才能找到問題所在。在這里很難給出一個通用的建議。但是我們在下面列出了一些關(guān)于運行時錯誤的常見建議：

1. ?process? 未定義。

• webpack 5 不再引入 Node.js 變化的 polyfill，在前端代碼中應(yīng)用避免免費使用。
• 想支持瀏覽器的使用方法？使用 ?exports? 或 ?imports? 中的 package.json字符串，會根據(jù)環(huán)境不同使用不同的代碼。

• 也可以使用 ?browser? 字段來支持舊的 bundlers。
• 替代方案。用 ?typeof process? 檢查包裹的代碼塊。請注意，這將對 bundle 大小產(chǎn)生負面影響。

• 使用環(huán)境變量，如 ?process.env. VARIABLE？?你需要使用 ?DefinePlugin? 或者  ?EnvironmentPlugin? 在配置中定義這些變量。

• 考慮使用 VARIABLE 代替，但需要檢查 ?typeof VARIABLE !== 'undefined'? 。?process.env? 是 Node.js 特有，應(yīng)避免在前端中使用。

2. 404錯誤將指向包含 auto 的 URL 

• 并非所有生態(tài)系統(tǒng)工具都已設(shè)置好的新 ?publicPath? 的默認值 ?output.publicPath: "auto"。

• 使用靜態(tài)的 ?output.publicPath: ""? 代替。

• Level 6: 棄用警告。

你可能會收到很多棄用警告，插件需要時間來趕上內(nèi)部的變化。請將這些棄用上報給插件。這些棄用只是警告，構(gòu)建仍然可以正常工作，只是會有小瑕疵（比如性能降低）。

1. 你使用帶有 ?--no-deprecation? 選項的 node 運行 webpack ，可以可以隱藏廢棄告警，例如：  ?node --no-deprecation node_modules/webpack/bin/webpack.js? 。但這只能作為臨時的解決方案。
2. plugin 和 loader 的開發(fā)者，應(yīng)遵循棄用信息中的建議以改進代碼。

• Level 7: 性能問題。

一般來說，webpack 5 的性能應(yīng)該會有所提高，但也存在少數(shù)情況性能會變差。

而在這里，你可以做一些事情來改善這種情況：

1. 通過 Profile 檢查時間花費在哪里。

• ?--profile --progress? 可以顯示一個簡單的性能目標。
• ?node --inspect-brk node_modules/webpack/bin/webpack.js + chrome://inspect ?/  ?edge://inspect?  。

• 你可以將這些性能文件保存到文件中，并在 issues 中提供它們。
• 嘗試使用 ?--no-turbo-inlining? 選項，在某些情況下可以獲得更好的堆棧信息。

2. 在增量構(gòu)建時，構(gòu)建模塊的世界可以通過使用像 webpack 4 中的不安全緩存來改善：

• ?module.unsafeCache: true? 
• 但是這可能會影響處理代碼庫的一些變化能力。

3. 全量構(gòu)建

• 與新功能相比，棄用特性的向后兼容層通常性能很差。
• 創(chuàng)建許多警告會影響構(gòu)建性能，即使它們被忽略。
• Source Maps 的代價很昂貴。請在文檔中查看 ?devtool? 選項以比較使用不同選項的代價。
• Anti-Virus（反病毒）保護可能會影響文件系統(tǒng)的訪問性能。
• 持久緩存可以幫助改善重復性的完整構(gòu)建。
• Module Federation 允許將應(yīng)用程序分割成多個較小的構(gòu)建。