可以用typescript编写网页包配置吗？

我在搜索的时候看到，网页上有打字。看来我可以用typescript写webpack.config.js了？但是我怎么能做到呢

---

我在网页源代码中找不到任何线索，您可以直接使用

webpack.config.ts

文件作为项目的配置

---

当然，因为TypeScript只是Javascript的超集，所以您可以始终使用TypeScript编写

webpack.config.ts

，并将其转换为有效的Javascript

webpack.config.js

文件。

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

有一个明确的线索，看到了吗

在那里使用的**解释**模块有一个扩展文件及其加载程序的列表

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

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

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

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

例如，TS有一些节点包，允许您要求（'something.TS'），该包将完成这项工作

解释程序包说明需要这些程序包中的一个

ts节点、类型脚本节点、类型脚本寄存器、类型脚本要求

所以npm/THRENts节点然后只需放置一个webpack.config.ts文件，它就可以正常工作了

---

编辑：网页包文档现在有专门的部分，其中包括TypeScript、CoffeeScript和Babel&JSX

我写了一篇博客文章，标题是TLDR，详细内容如下：

接受的答案对我不起作用，我还发现

ts节点

依赖项不支持ES6导入语句

我发现的最简单的方法是简单地运行TypeScript

tsc

工具将您的TypeScript转换为JavaScript，然后正常运行

webpack

工具：

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

这还有一个额外的优点，即不需要像另一个答案那样安装任何依赖项

奖金最高小费 Webpack类型是Webpack1和Webpack2语法的混合。您可以使用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;

然后，您可以在网页包配置中使用以下类型：

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

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

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

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;

您可以像这样将参数传递到Web包：

网页包--env.prod

---

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

在vscode中，您可以这样做：

• npm i-D@types/webpack

• 在

  webpack.config.js

  文件中添加类型注释注释，如下所示：

webpack.config.js：

---

如果您不想传输您的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节点运行npm脚本

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

网页第4页
使用WebpackV4时，必须为webpack安装打字（
npm安装--save@types/webpack
）

网页第5页
使用WebpackV5时，您不需要安装外部打字，因为Webpack5已经附带了TypeScript定义。实际上，建议在安装了
@types/webpack
之后删除它们：

网页包配置
下面是一个纯用TypeScript编写的网页包配置示例（这就是为什么它的文件名也以
.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;

我应该注意到，这是一个未记录的特性，至少从我看到的文档到nowts节点似乎是比较流行的选择：其他的还没有更新为yearsI使用（修改版本的在引擎盖下使用），它工作得很好。（用于希望
ts节点
加载
webpack.config.ts
，但也希望在配置文件（或配置文件导入的文件）更改时重新启动webpack的人的选项）嘿！您是否愿意考虑将接受标记移到高度赞成的答案？这是正确的。当我尝试执行此实现时，我发现
命名空间“webpack”没有导出的成员“NewLoaderRule”
可能需要更新此。
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;