TypeScript编写webpack配置函数时env与argv参数的正确类型是什么

你需要先安装webpack官方维护的类型依赖包 @types/webpack，如果项目中用到了webpack-dev-server，还需要额外安装 @types/webpack-dev-server，两个入参的类型定义都包含在这些包中。

最简写法（推荐） #

webpack类型定义内置了 ConfigurationFactory 配置工厂类型，直接给整个配置函数声明该类型即可，不需要单独标注入参和返回值类型：

import type { Configuration, ConfigurationFactory } from 'webpack';
import path from 'path';

const configuration: ConfigurationFactory = (env, argv) => ({
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
  // 其余配置项
});

export default configuration;

单独标注入参类型 #

如果你需要单独给两个入参声明类型，对应类型如下：

• env 的类型是 ConfigurationEnv
• argv 的类型是 CliConfigOptions

示例代码：

import type { Configuration, ConfigurationEnv, CliConfigOptions } from 'webpack';
import path from 'path';

const configuration = (env: ConfigurationEnv, argv: CliConfigOptions): Configuration => ({
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
  // 其余配置项
});

export default configuration;

自定义env字段的扩展方式 #

如果你的项目需要通过命令行向env传入自定义参数，可以扩展 ConfigurationEnv 类型避免类型报错：

// 举例：命令行传了--env production --env analyze=1
interface CustomEnv extends ConfigurationEnv {
  production?: boolean;
  analyze?: boolean;
}

const configuration = (env: CustomEnv, argv: CliConfigOptions): Configuration => {
  if (env.analyze) {
    // 自定义逻辑
  }
  return {
    // 配置项
  }
};

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