ts-loader

使用 ts-loader 编译 ts ，优点是能提前暴露出如参数类型不匹配的错误，缺点是不能转换 promise 等 es6+ 语法。

babel-loader

安装 @babel/preset-typescript 预设，使得 babel-loader 可以编译 ts，promise 等语法也能转换，缺点是参数类型不匹配等错误在编译时会直接通过。

// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage',
      corejs: 3
    }],
    ['@babel/preset-typescript']
  ]
}

打包前校验

使用 tsc 命令在 babel-loader 对 ts 进行编译前先校验，就可以同时实现暴露错误和兼容性。noEmit 参数表示只校验，不输出文件。

yarn tsc --noEmit && yarn webpack

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npm run ck && webpack",
    "serve": "webpack serve",
    "ck": "tsc --noEmit"
  },