跳至内容
文档错误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在后续构建中速度明显更快
  • 改进的快速刷新：优先处理快速刷新工作
  • 改进的资产长期缓存：确定性代码输出，在构建之间不太可能发生变化
  • 改进的树摇
  • 支持使用new URL("file.png", import.meta.url)的资产
  • 支持使用new Worker(new URL("worker.js", import.meta.url))的 Web 工作线程
  • 支持package.json中的exports/imports字段

在过去的版本中，我们已逐渐将 webpack 5 推出到 Next.js 应用程序中

  • 在 Next.js 10.2 中，我们自动选择加入了next.config.js中没有自定义 webpack 配置的应用程序
  • 在 Next.js 10.2 中，我们自动选择加入了没有next.config.js的应用程序
  • 在 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时，请使用内置生产源映射支持
  • 当使用 webpack 插件时，请确保将其升级到最新版本，在大多数情况下，最新版本将包含 webpack 5 支持。在某些情况下，这些升级的 webpack 插件将仅支持 webpack 5。

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