Webpack未监控TypeScript类型错误，存在错误仍编译问题

你的tsconfig.json里设置了"noEmit": true，这会让TypeScript编译器本身不生成输出文件。如果Webpack用babel-loader处理TS文件，Babel只负责转译语法，不会做类型检查，所以类型错误不会阻断编译流程。以下是两种可行的解决办法：

方案1：用ts-loader强制类型检查阻断编译 #

1. 修改tsconfig.json，把noEmit改为false，因为ts-loader需要TypeScript输出编译产物：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false, // 此处修改为false
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

2. 调整Webpack的loader配置，使用ts-loader：

module.exports = {
  // 其他配置...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

ts-loader默认会把TypeScript类型错误视为编译错误，触发时Webpack会停止编译。

方案2：用fork-ts-checker-webpack-plugin（不拖慢编译速度） #

如果想保持编译速度，同时在单独进程中做类型检查并阻断错误，可以用这个插件：

1. 安装插件：

npm install fork-ts-checker-webpack-plugin --save-dev

2. 修改Webpack配置：

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false, // 同步检查，错误时停止编译
      typescript: {
        configFile: './tsconfig.json'
      }
    })
  ],
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader', // 或ts-loader配合transpileOnly: true提升速度
        exclude: /node_modules/
      }
    ]
  }
};

这个插件会在独立进程中执行类型检查，不会影响Webpack的语法转译速度，同时发现类型错误时会阻断编译流程。

内容的提问来源于stack exchange，提问作者etrix