使用 webpack 的 ESLint HTML 报告答案

【问题标题】：ESLint HTML report using webpack使用 webpack 的 ESLint HTML 报告
【发布时间】：2016-09-07 23:46:10
【问题描述】：

如何使用 WebPack 配置获取 ESLint HTML 报告。我目前正在使用eslint-loader。 ESLint 格式化程序上的documentation 不清楚。

在webpack.config.js 中，我添加了以下内容作为预加载器。

preLoaders: [{
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loaders: ['eslint-loader'],
    }],

它完美地完成了这项工作，并在我运行 WebPack 时在控制台中显示错误。我在 WebPack 中另外添加了

eslint: {
        formatter: require("eslint/lib/formatters/html"),
    },

这会在控制台本身中抛出 HTML 输出字符串。我想获取它/另存为 HTML 文件。任何指针都会有所帮助。

【问题讨论】：

标签： reactjs webpack eslint

【解决方案1】：

您可能还需要在 webpack.config.js 中指定输出文件，如下所示：

...
module: {
    loaders: [
      {
        test: /\.jsx?$/,
        include: path.join(__dirname, 'src'),
        loader: 'babel',
      },
      {
          test: /\.js$/,
          exclude: /node_modules/,
          loaders: ['babel-loader', 'eslint-loader' ]
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  output: {
    path: path.join(__dirname, "src"),
    filename: "client.min.js"
  },
  eslint: {
    configFile: './.eslintrc',
    outputReport: {
      filePath: 'eslint_checkstyle_[hash].xml',
      formatter: require('eslint/lib/formatters/checkstyle'),
    }
  },
...

【讨论】：