用Webpack构建的项目配置支持TypeScript

版权声明： https://blog.csdn.net/huangpb123/article/details/81587067

1. 安装 TypeScript 相关依赖包

    安装依赖包的时候注意版本，因为我现在用的是 [email protected]，所以相对应的 ts-loader 包版本不能太高，不然编译时会报错。

npm i -g [email protected]
npm i --save-dev [email protected] [email protected]

2. 创建 TypeScript 的配置文件 tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "sourceMap": true,
        "allowJs": true
    },
    "include": [
        "src/ts/*"
    ],
    "exclude": [
        "node_modules"
    ]
}

3. 在 webpack.config.js 配置对 ts 的解析

module: {
    rules: [
        {
              test: /\.tsx?$/,
              use: {
                  loader: 'ts-loader'
              }
        },
    ]
}

ts 文件可能是 ts 或者 tsx 结尾的，所以匹配时需要用到问号，表示可有可无。