是否可以在打字稿中编写 webpack 配置？

Question

我在搜索时看到有 webpack 的类型。所以看来我可以用打字稿写 webpack.config.js 吗？但是我该怎么做呢？

Answer 1

你可以使用 TS 作为你的配置文件 (webpack.config.ts)

有一个明确的线索，请参阅Source Code

这里使用的**解释**模块是一个扩展文件列表和它们的加载器。

在突出显示的代码中，webpack 为默认文件生成一个包含所有可能扩展名的数组。

例如，给 webpack.config 你会得到一个数组

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

为此，您需要安装支持加载扩展的软件包之一。

例如，TS 有一些节点包，可以让您require('something.ts') 并且包会完成工作。

解释包声明需要这些包之一

ts-node, typescript-node, typescript-register, typescript-require

所以 npm/yarn ts-node 然后放一个 webpack.config.ts 文件就可以了！

编辑：Webpack 文档现在有关于 configuration languages 的专门部分，其中包括 TypeScript、CoffeeScript 和 Babel & JSX

Answer 2

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

在 vscode 中你可以这样做：

• npm i -D @types/webpack
• 将类型注释 cmets 添加到您的 webpack.config.js 文件中，如下所示：

webpack.config.js：

// @ts-check

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

Answer 3

Webpack 4

使用 webpack v4 时，您必须为 webpack (npm install --save @types/webpack) 安装类型。

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 结尾）：

webpack.config.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 可能会对您有所帮助。

Answer 4

我写了一篇标题为 "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 和 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 --env.prod

Answer 5

如果您不想转译您的 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"

Answer 6

我在 webpack 源代码中找不到任何线索，您可以直接使用 webpack.config.ts 文件作为项目的配置。

当然，因为 TypeScript 只是 Javascript 的超集，所以您始终可以使用 TypeScript 编写您的 webpack.config.ts 并将其转换为有效的 Javascript webpack.config.js 文件。