自定义 Webpack 配置

请注意：对 webpack 配置的更改不受语义版本控制的约束，因此请自行承担风险。

在继续向应用程序添加自定义 webpack 配置之前，请确保 Next.js 尚未支持您的用例。

一些常见的所需功能可作为插件使用。

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

next.config.js

module.exports = {
  webpack: (
    config,
    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  ) => {
    // Important: return the modified config
    return config
  },
}

webpack 函数执行三次，两次用于服务器（nodejs/edge 运行时），一次用于客户端。这允许您使用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 的示例用法。

// Example config for adding a loader that depends on babel-loader
// This source was taken from the @next/mdx plugin source:
// 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" 目前仅适用于中间件和 Edge 运行时中的服务器组件。