清理代碼

使用 ?/* webpackChunkName: '...' */? 時(shí)

請(qǐng)確保你了解了其含義圖：

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

為 JSON 模塊使用工具名稱導(dǎo)出

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

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

請(qǐng)使用如下方式替代：

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

清理構(gòu)造代碼

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

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

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

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

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

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

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

錯(cuò)誤信息告訴你哪里需要進(jìn)行修改。

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

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

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

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

• Level 5: 運(yùn)行時(shí)錯(cuò)誤。

這很棘手，你可能需要調(diào)試才能找到問題所在。在這里很難給出一個(gè)通用的建議。但是我們?cè)谙旅媪谐隽艘恍╆P(guān)于運(yùn)行時(shí)錯(cuò)誤的常見建議：

1. ?process? 未定義。

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

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

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

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

2. 404錯(cuò)誤將指向包含 auto 的 URL 

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

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

• Level 6: 棄用警告。

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

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

• Level 7: 性能問題。

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

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

1. 通過 Profile 檢查時(shí)間花費(fèi)在哪里。

• ?--profile --progress? 可以顯示一個(gè)簡(jiǎn)單的性能目標(biāo)。
• ?node --inspect-brk node_modules/webpack/bin/webpack.js + chrome://inspect ?/  ?edge://inspect?  。

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

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

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

3. 全量構(gòu)建

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