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

Question

我在搜索时看到有webpack的类型。所以我似乎可以在typescript中编写webpack.config.js？但是我该怎么做呢？

Answer 1

您可以使用TS作为配置文件（webpack.config.ts）

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

使用的**解释**模块有一个扩展文件列表及其加载器。

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

例如，给 webpack.config ，您将获得一个包含

的数组

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

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

例如，TS有一些节点包，使您能够要求（＆＃39; something.ts＆＃39;），并且包将完成工作。

解释包说明其中一个包是必需的

  

ts-node，typescript-node，typescript-register，typescript-require

所以npm / yarn ts-node 然后只需要一个 webpack.config.ts 文件，它就可以了！

编辑：Webpack文档现在有专门的configuration languages部分，其中包括TypeScript，CoffeeScript和Babel＆amp; JSX

Answer 2

我写了一篇名为"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和Web的混合体。 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 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;

Answer 4

如果您将vscode用作编辑器（或者也许其他支持JSDoc输入语法的编辑器），而您仅对类型检查文件以指导完成配置对象感兴趣，则可以这样做：

在vscode中，您可以这样操作：

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

webpack.config.js ：

// @ts-check

/** @type { import('webpack').Configuration } */
let config = {
    ...
}

module.export = config;

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文件。