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

Is it possible to write webpack config in typescript?

提问by starcorn

I saw, when searching, that there are typings for webpack. So it seems I can write webpack.config.js in typescript? But how can I do that?

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

回答by Shlomi Assaf

You can use TS as your config file (webpack.config.ts)

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

There is a clear clue for that, see Source Code

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

The ** interpret** module used there is a list of extension files and their loaders.

使用的 ** interpret** 模块有一个扩展文件及其加载程序的列表。

In the highlighted code webpack generates an array of all possible extension for the default files.

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

For example, give webpack.configyou will get an array with

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

• webpack.config.ts
• webpack.config.js
• ...... and so on

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

For this to work you need to install one of the packages that support loading your extension.

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

For example, TS has some node packages that enable you to require('something.ts')and the package will do the work.

例如，TS 有一些节点包，使您能够使用require('something.ts')并且该包将完成这项工作。

The interpretpackage states that one of these packages is required

在解释这些包需要一个包状态

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

ts-node、typescript-node、typescript-register、typescript-require

So npm/yarn ts-nodethen just put a webpack.config.tsfile and it will just work!

所以 npm/yarn ts-node然后只需放置一个webpack.config.ts文件，它就会起作用！

EDIT: Webpack documentation now has dedicated section on configuration languageswhich includes TypeScript, CoffeeScript and Babel & JSX

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

回答by Muhammad Rehan Saeed

I wrote a blog post titled "Writing your Webpack Configuration in TypeScript"for full details, here is the TLDR:

我写了一篇题为“在 TypeScript 中编写 Webpack 配置”的博客文章以获得完整的详细信息，这里是 TLDR：

The accepted answer didn't work for me, I also found that the ts-nodedependency didn't support ES6 import statements.

接受的答案对我不起作用，我还发现ts-node依赖项不支持 ES6 导入语句。

The simplest method I've found is to simply run the TypeScript tsctool to convert your TypeScript to JavaScript, then run the webpacktool as normal:

我发现的最简单的方法是简单地运行 TypeScripttsc工具将您的 TypeScript 转换为 JavaScript，然后webpack正常运行该工具：

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

This has the added advantage of not requiring you to install any dependencies, as in the other answer.

这有一个额外的好处，即不需要您安装任何依赖项，就像在另一个答案中一样。

Bonus Top Tip

额外提示

The Webpack types are a mixture of Webpack 1 & 2 syntax. You can use TypeScript to ensure that you are only using Webpack 2 syntax and remove all types from the Webpack 1 syntax. I did this by creating some new types extending the Webpack types:

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;

You can then use these types in your Webpack configuration:

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

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

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

Or you can pass arguments to your webpack configuration file like so:

或者你可以像这样将参数传递给你的 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;

You can pass arguments to webpack like this:

您可以像这样将参数传递给 webpack：

webpack --env.prod

webpack --env.prod

回答by pqnet

If you are using vscode as editor (or maybe others which support the JSDoc typing syntax) and you're only interested in typechecking your file to guide completion on your configuration object, you can do it like so:

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

In vscode you can do this as such:

在 vscode 中，你可以这样做：

• npm i -D @types/webpack
• add type annotation comments to your webpack.config.jsfile, as such:

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

webpack.config.js:

webpack.config.js:

// @ts-check

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

回答by Damian Paszkowski

If you do not want to transpile your webpack config and then pass it to webpack script in two steps I came up with other solution. Using webpack programmatically is really easy, so I have created a build script build.ts

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

Then you may run npm script with ts-nodelike so

然后你可以ts-node像这样运行 npm script

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

回答by michelgotta

I can't find any clue in the webpack sourcecode, that you can use a webpack.config.tsfile directly as configuration for your project.

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

Of course, because TypeScript is just a superset for Javascript, you can always use TypeScript to write your webpack.config.tsand convert it to a valid Javascript webpack.config.jsfile.

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