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

Question

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

Answer 1

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

有一个明确的线索,请参阅源代码

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

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

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

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

为此,您需要安装一个支持加载扩展的软件包.

例如,TS有一些节点包允许你需要('something.ts'),包将完成工作.

在解释包指出,这些软件包之一是必需的

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

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

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

Answer 2

网页包 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）：

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 的所有可能性感兴趣，那么配置 Webpack 的 6 种方法一文可能会对您有所帮助。

Answer 3

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

在 vscode 中，你可以这样做：

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

webpack.config.js :

// @ts-check

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

Answer 4

我写了一篇名为"在TypeScript中编写Webpack配置"的博客文章,了解完整的详细信息,这里是TLDR:

接受的答案对我不起作用,我还发现ts-node依赖不支持ES6 import语句.

我发现最简单的方法是简单地运行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