What is the type of the webpack config function when it comes to TypeScript?

Question

I cannot figure out the type of the webpack configuring function when the config is written in TypeScript.

Currently I export an object whose type is Configuration:

const config: Configuration = {
  mode: 'production',
  // ...
}
export default config;

which should be changed to exporting a function:

export default (...): ... => {
  return {
    mode: 'production'
    // ...
  }
}

but I don't know the proper type of that function and cannot find it among the type definitions:

https://github.com/webpack/webpack/blob/main/types.d.ts

Any ideas?

Answer 1

It seems like there's no well-established or recommended solution at the moment.

In the meantime, what I did was this.

webpack.types.ts:

import type { Configuration } from "webpack";
import type { Configuration as DevServerConfiguration } from "webpack-dev-server";

export interface WebpackConfiguration extends Configuration {
  devServer?: DevServerConfiguration;
}

type CLIValues = boolean | string;

type EnvValues = Record<string, CLIValues | Record<string, Env>>;

interface Env extends EnvValues {}

type Argv = Record<string, CLIValues>;

export interface WebpackConfigurationGenerator {
  (env?: Env, argv?: Argv): Configuration | Promise<Configuration>;
}

webpack.config.ts

import type { WebpackConfigurationGenerator } from "./webpack.types";

const generateConfig: WebpackConfigurationGenerator = (env, argv) => {
  // ...
};

export default generateConfig;