Webpack 不会因 TypeScript 错误而失败

Question

自从我升级到版本 5 以来，webpack 不会因 TypeScript 错误而失败。

这是我的场景：

index.ts（入口点）：

const message: string = "Hello World";
console.log(message);

• 我跑步

  ./node_modules/.bin/webpack --config webpack.config.js --watch

• 一切都很好。这是 webpack 的输出：

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [compared for emit] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 1251 ms
[webpack-cli] watching files for updates...
[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 152 ms
[webpack-cli] watching files for updates...

• 在下一步中，我添加一个代码片段，这应该会导致 TypeScript 错误：

const message: number = "Hello World"; // <= Type 'string' is not assignable to type 'number'.ts(2322)
console.log(message);

• 我预计 webpack 监视进程会失败或显示一些错误，但它不会失败。这是 webpack 输出的内容：

[webpack-cli] Compilation starting...
[webpack-cli] Compilation finished
asset index.js 50 bytes [emitted] [minimized] (name: main)
./src/index.ts 65 bytes [built] [code generated]
webpack 5.0.0 compiled successfully in 244 ms
[webpack-cli] watching files for updates...

有趣的是，只有当我在启动 webpack 监视进程后更改

index.ts

时才会发生这种情况。如果我在没有

--watch

选项的情况下运行 webpack，我会得到此输出，并且不会创建任何捆绑文件（如预期）：

[webpack-cli] Compilation finished
assets by status 50 bytes [cached] 1 asset
./src/index.ts 65 bytes [built] [code generated] [1 error]

ERROR in /Users/oliverschwendener/projects/test/src/index.ts
./src/index.ts
[tsl] ERROR in /Users/oliverschwendener/projects/test/src/index.ts(1,7)
      TS2322: Type 'string' is not assignable to type 'number'.

webpack.config.js:

const path = require('path');

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

module.exports = config;

*编辑：这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es2015",
    "module": "commonjs",
    "lib": ["dom", "es2017"],
    "sourceMap": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "moduleResolution": "node"
  }
}

我无法想象这是 webpack、webpack-cli 或 ts-loader 中的错误。所以我猜我的配置有问题。谁能告诉我这里出了什么问题吗？谢谢！

• webpack 5.3.1（webpack 版本 4.44.2 一切正常）
• webpack-cli 4.1.0
• ts-loader 8.0.7
• 打字稿4.0.5

Answer 1

在我的例子中，webpack v5.74.0 没有输出打字稿语法错误的错误，因为设置中缺少一个包：

fork-ts-checker-webpack-plugin

（npm 链接）

安装并设置完毕后，我终于可以在 webpack 编译上看到打字稿错误。

Answer 2

在您的

tsconfig.json

中，您可以将

noEmitOnError

设置为

true

以确保遇到错误时进程会中断：

{
    "compilerOptions": {
        "noEmitOnError": true,

（没有显式设置，默认为

false

）

Answer 3

没关系，这是 ts-loader 中的一个错误：https://github.com/TypeStrong/ts-loader/issues/1204

Answer 4

添加deLiz的答案，必须使用

fork-ts-check-webpack-plugin

插件来使

webpack

编译因打字稿错误而失败的原因是因为

ts-loader

配置。

检查

webpack

的

ts-loader

配置并查看

transpileOnly

选项是否设置为

true

：

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true // WILL DISABLE TYPESCRIPT ERRORS
            }
          }
        ]
      }
    ]
  }
}

如果设置为

true

，那么很可能是这样配置的以加快编译过程。

您可以将

transpileOnly

设置为

false

（这会导致编译时间更长），或者您可以使用 fork-ts-checker-webpack-plugin，如

ts-loader

文档中所述

 transpileOnly

选项：

如果你想显着加快编译速度，你可以设置这个标志。 但是，您从应用程序中不同依赖项之间的静态类型检查中获得的许多好处将会丢失。

transpileOnly

将不会加快项目参考资料的编译速度。

建议将

transpileOnly

与 fork-ts-checker-webpack-plugin 一起使用，以再次进行完整的类型检查。要了解实践中的情况，请查看我们的示例。

请注意，这并不能解决原始海报的问题（因为他们没有将

transpileOnly

设置为

true

），但在搜索为什么

webpack

没有因发现打字稿错误而导致编译失败后，我登陆了此页面。