跳到内容
文档错误Webpack 5 采用

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 Worker
  • 支持 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 默认对所有应用程序启用。您仍然可以 Opt-out 并使用 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 时，请使用内置的生产环境 Source Map 支持
  • 当使用 webpack 插件时，请确保将它们升级到最新版本，在大多数情况下，最新版本将包含 webpack 5 支持。在某些情况下，这些升级后的 webpack 插件将仅支持 webpack 5。

如果您遇到问题，可以在此帮助讨论中与社区联系。