Menu

Custom Webpack Config

值得注意的是：webpack 配置的变更不受语义化版本控制约束，请自行承担风险

在继续为你的应用添加自定义 webpack 配置之前，请确保 Next.js 尚未支持你的使用场景：

一些常见的功能需求可以通过插件实现：

为了扩展我们对 webpack 的使用，你可以在 next.config.js 中定义一个函数来扩展其配置，如下所示：

next.config.js
module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // 重要：返回修改后的配置
    return config
  },
}

webpack 函数会被执行三次，服务器端 (nodejs / edge runtime) 两次，客户端一次。这允许你使用 isServer 属性来区分客户端和服务器端配置。

webpack 函数的第二个参数是一个对象，具有以下属性：

  • buildId：String - 构建 ID，用作构建之间的唯一标识符
  • dev：Boolean - 表示是否在开发环境下进行编译
  • isServer：Boolean - 服务器端编译时为 true，客户端编译时为 false
  • nextRuntime：String | undefined - 服务器端编译的目标运行时；可以是 "edge" 或 "nodejs"，客户端编译时为 undefined
  • defaultLoaders：Object - Next.js 内部使用的默认加载器：
    • babel：Object - 默认的 babel-loader 配置

defaultLoaders.babel 的使用示例：

// 添加依赖 babel-loader 的加载器的配置示例
// 这段代码来自 @next/mdx 插件源码：
// https://github.com/vercel/next.js/tree/canary/packages/next-mdx
module.exports = {
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.mdx/,
      use: [
        options.defaultLoaders.babel,
        {
          loader: '@mdx-js/loader',
          options: pluginOptions.options,
        },
      ],
    })
 
    return config
  },
}

nextRuntime

注意，当 nextRuntime 为 "edge" 或 "nodejs" 时，isServer 都为 true，nextRuntime "edge" 目前仅用于中间件和边缘运行时的服务器组件。