处理typescript

Webpack 有很多种接入 TypeScript 的方法，比如 ts-loader、awesome-ts-loader、 babel-loader等。

使用ts-loader

npm i -D typescript ts-loader

配置webpack.config.js

const path = require('path');
module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  }
};

resolve这一段的意思就是: 分析依赖的时候遇见.ts或者.js结尾的文件自动解析，就是不用写明是xyz.ts而写成xyz就行。
具体ts相关的配置写在tsconfig.json中就行。

使用@babel/preset-typescript

使用@babel/preset-typescript 更为简单，但是只是简单完成代码转换，并未做类似 ts-loader 的类型检查工作。

// 安装完成后
module.exports = {
  /* ... */
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-typescript'],
            },
          },
        ],
      },
    ],
  },
};