Webpack 5 採用

為什麼會出現此訊息

Next.js 已採用 webpack 5 作為預設編譯器。我們已投入大量精力，確保從 webpack 4 到 5 的轉換過程盡可能順利。

您的應用程式目前已使用 webpack5: false 旗標停用 webpack 5，該旗標已在 Next.js 12 中移除。

next.config.js

module.exports = {
  // Webpack 5 is enabled by default
  // You can still use webpack 4 while upgrading to the latest version of Next.js by adding the "webpack5: false" flag
  webpack5: false,
}

在您的應用程式中使用 webpack 5 有許多好處，尤其是：

改進的磁碟快取：next build 在後續建置中速度明顯加快。
改進的快速更新：快速更新工作會被優先處理。
改進的資源長期快取：確定性程式碼輸出在不同建置之間較不容易發生變化。
改進的程式碼刪除 (Tree Shaking)
支援使用 new URL("file.png", import.meta.url) 的資源。
支援使用 new Worker(new URL("worker.js", import.meta.url)) 的 Web Workers
支援 package.json 中的 exports/imports 欄位

在過去的版本中，我們已逐步將 webpack 5 導入 Next.js 應用程式。

在 Next.js 10.2 中，我們自動將沒有在 next.config.js 中自訂 webpack 設定的應用程式加入使用 webpack 5。
在 Next.js 10.2 中，我們自動將沒有 next.config.js 檔案的應用程式加入使用 webpack 5。
在 Next.js 11 中，所有應用程式預設啟用 webpack 5。您仍然可以選擇退出並使用 webpack 4，透過在 next.config.js 中設定 webpack5: false 來維持向下相容性。
Next.js 12 移除了 webpack 4 的支援。

自訂 webpack 設定

如果您有自訂 webpack 設定，無論是透過自訂插件還是您自己的修改，您都必須採取一些步驟來確保您的應用程式能與 webpack 5 搭配使用。

使用 next-transpile-modules 時，請確保您使用包含此修補程式的最新版本。
使用 @zeit/next-css / @zeit/next-sass 時，請改用內建的 CSS/Sass 支援。
使用 @zeit/next-preact 時，請改用此範例。
使用 @zeit/next-source-maps 時，請使用內建的 production Source Map 支援。
使用 webpack 插件時，請確保它們已升級到最新版本，大多數情況下，最新版本將包含 webpack 5 支援。在某些情況下，這些升級的 webpack 插件將僅支援 webpack 5。

有用連結

如果您遇到問題，您可以在此說明討論區與社群聯繫。