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

Question

// index.ts

let a = 1;
a.map();

Webpack doesn't throw this TS error about method "map" on type "number. Do you know how check these errors automatically during webpack build?

Can't find anything on the internet.

Previously I saw this: https://cloud.githubusercontent.com/assets/376414/7276837/840b4dec-e8da-11e4-8362-c44f531d8cd9.png

How can I get the same output of webpack (TS errors) using webpack 3?

TypeScript thinks it's ok (any valid JS is also valid TypeScript), so, any project could be bundled with any JS error.

If I'm running tsc app/index.ts then I see the error: app/index.ts(8,3): error TS2339: Property 'map' does not exist on type 'number'.

So, TypeScript compiler throws the error, but webpack (ts-loader I think) ignores it.

I'm using webpack 3.8.1

Here is config:

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
        })
    ]

};

Answer 1

do you ever heard about linting ? here 's the loader for tslint for webpack