TypeScript编写webpack配置时导出的配置函数对应的正确类型是什么

共有两种常用的实现方式，可根据你的webpack版本选择： #

方案1：手动标注类型（全版本兼容） #

webpack导出的配置函数固定有两个入参，返回值就是你之前使用的Configuration类型，直接标注即可：

• 第一个入参env：命令行传入的自定义环境变量，类型可根据你的实际使用场景定义，无特殊需求可直接标注为Record<string, any>
• 第二个入参argv：webpack执行时的内置命令行参数，类型为WebpackOptionsNormalized

代码示例：

import type { Configuration, WebpackOptionsNormalized } from 'webpack'

// 完整参数标注写法
export default function(env: Record<string, any>, argv: WebpackOptionsNormalized): Configuration {
  return {
    // 可以直接使用argv里的内置参数，比如命令行传入的mode
    mode: argv.mode ?? 'production',
    // 其余配置项
  }
}

// 不需要使用入参时的简化写法
export default (): Configuration => {
  return {
    mode: 'production',
    // 其余配置项
  }
}

方案2：使用内置defineConfig工具函数（webpack 4.40+ 推荐） #

新版本webpack的类型定义内置了defineConfig工具函数，会自动推导配置函数的参数和返回值类型，不需要手动标注任何类型，使用更简便：

import { defineConfig } from 'webpack'

export default defineConfig((env, argv) => {
  return {
    mode: 'production',
    // 其余配置项
  }
})

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