如何在Nuxt 3中添加webpack loader并解决配置类型报错

在Nuxt 3项目中添加webpack loader（以ejs-loader为例）时，使用Nuxt 2风格的build.extend+chainWebpack写法，会触发如下TypeScript类型报错：

Type '{ extend(config: any): void; }' is not assignable to type '{ quiet?: boolean; analyze?: any; profile?: boolean; extractCSS?: boolean; cssSourceMap?: boolean; ssr?: any; parallel?: boolean; cache?: boolean; standalone?: boolean; publicPath?: string; serverURLPolyfill?: string; ... 25 more ...; followSymlinks?: boolean; }'.
  Object literal may only specify known properties, and 'extend' does not exist in type '{ quiet?: boolean; analyze?: any; profile?: boolean; extractCSS?: boolean; cssSourceMap?: boolean; ssr?: any; parallel?: boolean; cache?: boolean; standalone?: boolean; publicPath?: string; serverURLPolyfill?: string; ... 25 more ...; followSymlinks?: boolean; }'.ts(2322)

报错核心原因：Nuxt 3已完全重构构建配置体系，旧版Nuxt 2的build.extend、chainWebpack配置项已被移除，类型定义中不存在对应字段，因此校验不通过。

• 切换构建器为Webpack：Nuxt 3默认使用Vite作为构建工具，Webpack loader仅在Webpack构建模式下生效，首先安装Webpack构建器依赖：

npm i @nuxt/webpack-builder -D

• 安装ejs相关依赖：

npm i ejs-loader ejs -D

• 修改nuxt.config.ts配置，通过Nuxt 3官方提供的构建钩子注入loader规则，完整可用配置如下：

// nuxt.config.ts
export default defineNuxtConfig({
  // 指定使用webpack构建器
  builder: 'webpack',
  // 开启nuxi类型检查（保持原有配置即可）
  typescript: {
    typeCheck: true
  },
  // 通过webpack配置钩子注入自定义loader规则
  hooks: {
    // 同时修改客户端、服务端的webpack配置
    'webpack:config': (configList) => {
      configList.forEach(config => {
        config.module?.rules.push({
          test: /\.ejs$/,
          use: [
            {
              loader: 'ejs-loader',
              options: {
                esModule: false
              }
            }
          ]
        })
      })
    }
  }
})

如果需要分别对客户端、服务端构建配置做差异化处理，可以使用对应独立钩子，无需遍历配置数组：

hooks: {
  // 仅修改客户端构建配置
  'webpack:config:client': (clientConfig) => {
    clientConfig.module?.rules.push({
      test: /\.ejs$/,
      use: [{ loader: 'ejs-loader', options: { esModule: false } }]
    })
  },
  // 仅修改服务端构建配置
  'webpack:config:server': (serverConfig) => {
    serverConfig.module?.rules.push({
      test: /\.ejs$/,
      use: [{ loader: 'ejs-loader', options: { esModule: false } }]
    })
  }
}

配置完成后重启开发服务，ejs-loader即可正常生效，不会再出现前述TypeScript报错。

内容的提问来源于stack exchange，提问作者Serio