Webpack 如何使用Typescript做为配置文件？

要使用 typesccript 做为 webpack 的配置文件首先要安装一些包。

#使用npm安装
npm i -D typescript ts-node @types/node @types/webpack
#使用yarn安装
yarn add --dev typescript ts-node @types/node @types/webpack

然后就是使用 Teypscript 写配置文件webpacck.config.ts了。

import * as webpack from "webpack";
import * as path from "path";

const config: webpack.Configuration = {
  mode: "production",
  entry: "./foo.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "foo.bundle.js",
  },
};

export default config;

然后就是我们熟悉的tsconfig.json文件 我们可以使用命令tsc --init来自动生成一个tsconfig.json文件

{
  "compilerOptions": {
    "module": "commonjs", //该字段必须是commonjs
    "esModuleInterop": true
  },
  "exclude": ["node_modules", "webpack.config.tsx"]
}

然后使用命令webpack -w的时候就会自动使用webpack.config.ts了