如何强制 Webpack 3 抛出 TypeScript 错误？答案

【问题标题】：How to force Webpack 3 to throw TypeScript errors?如何强制 Webpack 3 抛出 TypeScript 错误？
【发布时间】：2018-04-19 12:52:01
【问题描述】：

// index.ts

let a = 1;
a.map();

Webpack 不会在类型“number. 你知道如何在 webpack 构建过程中自动检查这些错误吗？

在互联网上找不到任何东西。

之前我看过这个：https://cloud.githubusercontent.com/assets/376414/7276837/840b4dec-e8da-11e4-8362-c44f531d8cd9.png

如何使用 webpack 3 获得相同的 webpack 输出（TS 错误）？

TypeScript 认为没问题（任何有效的 JS 也是有效的 TypeScript），因此，任何项目都可以捆绑任何 JS 错误。

如果我正在运行 tsc app/index.ts 那么我会看到错误： app/index.ts(8,3)：错误 TS2339：“数字”类型上不存在属性“地图”。

所以，TypeScript 编译器会抛出错误，但 webpack（我认为是 ts-loader）会忽略它。

我正在使用 webpack 3.8.1

这里是配置：

let path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: path.resolve('app/index.ts'),

    output: {
        path: path.resolve('dist'),
        filename: 'app.js'
    },

    resolve: {
        extensions: ['.js', '.vue', '.json', '.ts'],
        alias: {
            vue: path.resolve('node_modules/vue/dist/vue.js'),
            app: path.resolve('app')
        }
    },

    module:{
        rules: [
            { test: /\.tsx$/, use: 'ts-loader' },
            { test: /\.vue$/, use: 'vue-loader' },
            { test: /\.pug$/, use: 'pug-loader' }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve('app/index.pug'),
            cache: false
        }),
        new webpack.LoaderOptionsPlugin({
            debug: true
        })
    ]

};

【问题讨论】：

标签： javascript webpack

【解决方案1】：

你听说过linting吗？ here 是用于 webpack 的 tslint 的加载器

【讨论】：

Linting 不检查类型。如果你使用 tslint 就不会出错，因为从语法上来说没问题。
同理，看这个要点：gist.github.com/yakimchuk/83c65f5043ab588e75e43545177d5838
另外，如果我删除 .ts 加载器，那么构建也成功。
// tslint 错误默认显示为警告 // 将 emitErrors 设置为 true 以将它们显示为错误 emitErrors: true, // tslint 默认不会中断编译 // 如果你想要任何文件with tslint errors to fail // 将 failOnHint 设置为 true failOnHint: true,
我发现了错误。模式 /\.tsx$/ 不正确（我从存储库中获取）。