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

npm

经常使用webpack的人应该都知道, webpack的默认配置文件是webpack.config.js,但对于使用typescript的人来说不能直接使用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,
"jsx":"react"
},
"exclude": [
"node_modules",
"webpack.config.tsx"
]
}

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