webpack 配置 TypeScript 的两种方式因为 Webpack 无法识别 TypeScript 类型的文件，

前言

因为 Webpack 无法识别 TypeScript 类型的文件，所以需要 loader 进行处理，常有两种方式：

• @babel/preset-typescript
• ts-loader

之前并没有太在意这两种方式，但突然有天用的时候对使用哪种方式有点不知所粗，所以详细看了一下这两种方式，下面是我对这两种配置方式进行大致的总结。

第一种方式：@babel/preset-typescript

这是 Babel 推荐的一种方式：

在 Babel 官网中这样提到：

这种方式的配置一般为：

// webpack.config.js
module.exports = {
  ...
  rules: [
    {
      test: /\.tsx?$/,
      include: paths.appSrc,
      use: "babel-loader",
    }
  ]
  ...
}

// babel.config.json
{
  "presets": ["@babel/preset-typescript"]
}

第二种方式：ts-loader

这是专门适用于 webpack 的 TypeScript loader。

这种方式的配置一般为：

// webpack.config.js
module.exports = {
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

两者之间的对比

对比一

ts-loader 用于将 TypeScript（ES6）编译成 JavaScript（ES6）。而 TypeScript 没有做 polyfills，所以要编译成 ES5 则仍需要 babel-loader。其 官方 也这样提到：

让我们打开这个示例，查看其中关键代码：

所以要 polyfill 则仍需要 babel 继续处理。

对比二

webpack 官网 中提到：

因为 Babel 只做代码转换，跳过了类型检查，所以它构建变得非常快，但相反构建时没有类型安全，您就必须确保正确编译项目以确保类型安全。

关于选用哪一种的建议

这篇文章 里的建议：

这篇文章 里的建议：

关于 babel 的评价： 关于 ts-loader 的评价：

所以最终如何选取根据自己的适用情况来判断，考虑各自优缺点来抉择。