introduction

注意到改变webpack配置需要执行承担风险 …

在继续增加自定义webpack 配置到你的应用中时确保Next.js 不支持你的使用情况

某些常见的特性作为了插件

为了扩展webpack的使用,你能够定义一个函数,它扩展了next.config.js内置配置,就像是

  1. module.exports = {
  2.   webpack: (
  3.     config,
  4.     { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
  5.   ) => {
  6.     // Important: return the modified config
  7.     return config
  8.   },
  9. }

webpack函数它会执行两次,一次是服务器,一次是客户端,这允许你通过isServer属性判断它是客户端还是服务器 ..

webpack函数的第二个参数时具有以下属性的对象

  • buildId: String 构建id,构建之间使用一个独一无二的标识符
  • dev: Boolean如果编译将在开发中完成
  • isServer: Boolean true 表示服务端编译,否则表示客户端编译
  • nextRuntime: String | undefined对于服务端编译的目标运行时,要么是"edge","nodejs",对于客户端编译是undefined
  • defaultLoaders: Object 由Next.js 内部使用的默认加载器 ..
  • babel: Object - 默认的babel-loader配置

使用defaultLoaders.babel示例

  1. // Example config for adding a loader that depends on babel-loader
  2. // This source was taken from the @next/mdx plugin source:
  3. // https://github.com/vercel/next.js/tree/canary/packages/next-mdx
  4. module.exports = {
  5.   webpack: (config, options) => {
  6.     config.module.rules.push({
  7.       test: /\.mdx/,
  8.       use: [
  9.         options.defaultLoaders.babel,
  10.         {
  11.           loader: '@mdx-js/loader',
  12.           options: pluginOptions.options,
  13.         },
  14.       ],
  15.     })
  17.     return config
  18.   },
  19. }

nextRuntime

注意到isServer是true情况是nextRuntime为"edge"或者"nodejs",nextRuntime"edge"仅仅在仅edge 运行时种服务器组件以及中间件生效 …