WebPack 在主页上显示 tslint 警告答案

【问题标题】：WebPack displaying tslint warning on main pageWebPack 在主页上显示 tslint 警告
【发布时间】：2017-12-20 10:21:20
【问题描述】：

我一直在升级到 webpack 2，但现在我无法显示主页，因为我最终收到警告消息：

编译失败：

./src/app/login/login.component.ts [20, 21]: 缺少空格

这是我在控制台中看到的警告消息之一，但它从未停止过 webpack 服务器显示内容。

在控制台 webpack 中说：“编译时出现警告”，因此不应在主页上显示编译失败。

【问题讨论】：

标签： angular webpack tslint

【解决方案1】：

您似乎在编译期间执行了一个 linter。它是 ESLint 或 TSLint，具体取决于您的编程语言（Javascript/Typescript）。它在执行 linter 后跳过编译，因为它检测到代码中的样式问题。

你的 package.json 中有这些依赖项吗？

"devDependencies": {
        "eslint": "4.1.1",
        "eslint-loader": "1.8.0"
    }

查看你的 webpack.config.js，可能有类似这样的定义，它在编译期间执行 ESLint：

module: {
   rules: [
           {
            enforce: "pre",
            test: /\.js$/,
            exclude: /node_modules/,
            loader: "eslint-loader"
           }
   ]
}

如果它解决了您的问题，请随时接受它作为答案。

【讨论】：

这是我在 webpack 配置中的：模块：{规则：[{测试：/\.ts$/，使用：[{loader：'tslint-loader'，选项：{typeCheck： true}}]，排除：/node_modules/，强制：“pre”}，
我猜 tslint 被配置为使构建失败，即使它只是一个警告。您可以通过在项目的根级别提供 tslint.json 来配置 TSLint。也许您已经拥有它并设置了failOnHint：true？见官方文档：npmjs.com/package/tslint-loader
问题在于 webpack 配置而不是 tslint

【解决方案2】：

终于修好了:)

其实这是 webpack 的一个 bug： https://github.com/webpack/webpack-dev-server/issues/861

解决方法是设置：

devServer: {
  overlay: {
    warnings: false,
    errors: true
  }
}

【讨论】：