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了