您可以使用TS作为配置文件（webpack.config.ts）
有一个明确的线索，见源代码
这里使用的interpret模块是一个扩展文件及其加载程序的列表。
在突出显示的代码中，webpack生成一个数组，其中包含默认文件的所有可能的扩展名。
例如，给予webpack.config，您将获得一个数组，其中

• webpack.config.ts
• webpack.config.js
• ......等等等等

要使其正常工作，您需要安装一个支持加载扩展的软件包。
例如，TS有一些节点包，使您能够require（'something. ts'），包将完成这项工作。

interpret软件包声明需要其中一个软件包

ts节点，类型脚本节点，类型脚本寄存器，类型脚本要求
因此，npm/yarnts-node只需放入一个webpack.config.ts文件，它就会工作！

编辑：Webpack文档现在有专门的配置语言部分，包括TypeScript、CoffeeScript和Babel & JSX

如果您使用vscode作为编辑器（或者其他支持JSDoc类型语法的编辑器），并且您只对类型检查文件以指导配置对象的完成感兴趣，您可以这样做：
在vscode中，您可以这样做：

• npm i -D @types/webpack
• 将类型注解注解添加到webpack.config.js文件中，如下所示：
• webpack.配置文件 *：

// @ts-check

module.exports = /** @type { import('webpack').Configuration } */ ({
    ...
});

网络包4

当使用webpack v4时，您必须安装webpack的类型（npm install --save @types/webpack）。

网络包5

当使用webpack v5时，你不需要安装外部类型，因为webpack 5已经附带了TypeScript定义。实际上，当你安装了@types/webpack时，建议你删除它们：https://webpack.js.org/blog/2020-10-10-webpack-5-release/#typescript-typings

Webpack配置

下面是一个完全用TypeScript编写的webpack配置示例（这就是为什么它的文件名也以.ts结尾）：

网页套件.配置.ts

import {Configuration} from 'webpack';

const config: Configuration = {
  mode: 'development',
  module: {
    rules: [
      {
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        test: /\.[tj]sx?$/,
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
};

export default config;

文件

如果您对如何配置webpack的所有可能性感兴趣，那么6 ways to configure Webpack article可能会帮助您。

我写了一篇名为"Writing your Webpack Configuration in TypeScript"的博客文章以了解详细信息，这里是TLDR：
这个公认的答案对我不起作用，我还发现ts-node依赖项不支持ES6导入语句。
我发现的最简单的方法是运行TypeScript tsc工具将TypeScript转换为JavaScript，然后正常运行webpack工具：

tsc --lib es6 webpack.config.ts
webpack --config webpack.config.js

这样做的另一个好处是不需要安装任何依赖项，就像另一个答案中那样。

奖励顶部提示

Webpack类型是Webpack 1和Webpack 2语法的混合。您可以使用TypeScript来确保您只使用Webpack 2语法，并从Webpack 1语法中删除所有类型。我通过创建一些扩展Webpack类型的新类型来做到这一点：

// webpack.common.ts
import * as webpack from "webpack";

export type INewLoader = string | webpack.NewLoader;
export interface INewUseRule extends webpack.NewUseRule {
  use: INewLoader[];
}
export interface INewLoaderRule extends webpack.NewLoaderRule {
  loader: INewLoader;
}
export type INewRule = INewLoaderRule | INewUseRule |
    webpack.RulesRule | webpack.OneOfRule;
export interface INewModule extends webpack.NewModule {
  rules: INewRule[];
}
export interface INewConfiguration extends webpack.Configuration {
  module?: INewModule;
}
export interface IArguments {
  prod: boolean;
}
export type INewConfigurationBuilder = (env: IArguments) => INewConfiguration;

然后，您可以在Webpack配置中使用这些类型：

import * as path from "path";
import * as webpack from "webpack";
import { INewConfiguration, INewConfigurationBuilder } from "./webpack.common";

const configuration: INewConfiguration = {
  // ...
};
export default configuration;

或者，您可以将参数传递给Webpack配置文件，如下所示：

import * as path from "path";
import * as webpack from "webpack";
import { IArguments, INewConfiguration, INewConfigurationBuilder } from "./webpack.common";

const configurationBuilder: INewConfigurationBuilder = 
  (env: IArguments): INewConfiguration => {
    const isDevBuild = !(env && env.prod);
    const configuration: INewConfiguration = {
      // ...
    };
    return configuration;
  };
export default configurationBuilder;

您可以将参数传递给webpack，如下所示：
Webpack --环境产品

如果你不想传输你的webpack配置，然后把它传递给webpack脚本在两个步骤我想出了其他的解决方案。使用webpack编程是真的很容易，所以我已经创建了一个构建脚本build.ts

import webpack from 'webpack'

import config from './webpack.config'

webpack(config, (err, stats) => err 
    ? console.log(err) 
    : console.log(stats)
);

然后，您可以使用ts-node运行npm脚本，如下所示

"build": "ts-node --project ./path-to/tsconfig.json ./build.ts"

Webpack的文档中对此进行了说明：
要在TypeScript中编写webpack配置，首先要安装必要的依赖项，即TypeScript和来自DefinitelyTyped项目的相关类型定义：

npm install --save-dev typescript `ts-node` @types/node @types/webpack
# and, if using webpack-dev-server < v4.7.0
npm install --save-dev @types/webpack-dev-server

然后继续编写配置：

网页套件.配置.ts

import * as path from 'path';
import * as webpack from 'webpack';
// in case you run into any typescript error when configuring `devServer`
import 'webpack-dev-server';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

export default config;

上面的示例假定在tsconfig.json文件中将版本〉= 2.7或更高版本的TypeScript与新的esModuleInterop和allowSyntheticDefaultImports编译器选项一起使用。
请注意，您还需要检查您的tsconfig.json文件。如果tsconfig.json的compilerOptions中的模块是commonjs，则设置完成，否则webpack将失败并返回错误。这是因为ts-node不支持除commonjs以外的任何模块语法。
此问题有三种解决方案：

• 修改tsconfig.json。
• 修改tsconfig.json并为ts-node添加设置。
• 安装tsconfig-paths。第一个选项是打开您的tsconfig.json文件并查找compilerOptions。将target设置为“ES 5”，将module设置为“CommonJS”（或者完全删除module选项）。

第二个选项是添加ts-node的设置：
您可以保留“模块”：tsc的“ESNext”，如果您使用webpack或其他构建工具，请为ts-node设置一个覆盖。ts-node config

{
  "compilerOptions": {
    "module": "ESNext",
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

第三个选项是安装tsconfig-paths软件包：

npm install --save-dev tsconfig-paths

并为您的Webpack配置创建一个单独的TypeScript配置：

为webpack-config.json配置文件配置文件

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

提示

ts-node可以使用tsconfig-paths提供的环境变量来解析tsconfig.json文件。
然后设置由tsconfig-paths提供的环境变量process.env.TS_NODE_PROJECT，如下所示：

软件包.json

{
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }
}

警告

我们收到报告指出TS_NODE_PROJECT可能无法与“TS_NODE_PROJECT”一起使用，发生无法辨识的命令错误。因此，以跨环境执行似乎可以修正这个问题，如需详细信息，请参阅这个问题。

确保您已经安装了ts-node软件包

我在webpack源代码中找不到任何线索，你可以直接使用webpack.config.ts文件作为你项目的配置。
当然，因为TypeScript只是Javascript的超集，所以您可以随时使用TypeScript编写webpack.config.ts并将其转换为有效的Javascript webpack.config.js文件。