Webpack 抑制浏览器控制台上的 eslint 警告

Question

我已经完成了我的 eslint 规则配置和根据我的规则重构项目文件。事情是我有一些警告，我可能想离开那里一段时间。但我的问题是浏览器控制台上显示警告，这使得开发变得不可能。

下面是我的 webpack 配置：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const context = path.resolve('.');


module.exports = {
  context: context,
  entry: './src/client.js',
  output: {
    path: path.join(context, 'build/client'),
    publicPath: '/static/',
    filename: '[name]-[hash].js'
  },
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader'
      },
    ],
    loaders: [{
      test: /(?:node_modules).+\.css$/,
      loader: 'style!css'
    }, {
      test: /\.scss$/,
      loader: ExtractTextPlugin.extract([
        'css-loader',
        'postcss-loader',
        'sass-loader',
        'sass-resources'
      ])
    }, {
      test: /\.js$/,
      loader: 'babel',
      exclude: /(node_modules)/
    }, {
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
     loader: "url?limit=10000&mimetype=application/font-woff"
   }, {
     test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
     loader: "url?limit=10000&mimetype=application/font-woff"
   }, {
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
     loader: "url?limit=10000&mimetype=application/octet-stream"
   }, {
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
     loader: "file"
   }, {
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
     loader: "url?limit=10000&mimetype=image/svg+xml"
   }, {
      test: /\.json$/,
      loader: 'json'
    }]
  },
  postcss: function() {
    return [
      require('autoprefixer')
    ];
  },
  sassResources: [
    path.resolve(__dirname, '../src/stylesheets/base/_variables.scss'),
    path.resolve(__dirname, '../src/stylesheets/base/_mixins.scss')
  ],
  devServer: {
    watchOptions: {
      aggregateTimeout: 1000
    }
  },
  plugins: [
    new ExtractTextPlugin("[name]-[hash].css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'local')
    })
  ],
  devtool: "cheap-module-source-map"
};

我errors在浏览器控制台上显示没有问题，但是有没有办法只在浏览器控制台上而不是在节点终端上抑制警告？

Answer 1

https://devhub.io/repos/coryhouse-eslint-loader

在我的 webpack.config.js 我有选项设置：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules)/,
      use: [
        {
          loader: 'babel-loader',
          options: {
            presets: [
              ['es2015', {modules: false}],
              'react'
            ],
            plugins: [ 'react-hot-loader/babel' ]
          }
        }, {
          loader: 'eslint-loader',
          options: {
            quiet: true
          }
        }
      ]
    }
  ]
}

最后一行是quiet: true，这是它抑制警告的方式。

Answer 2

用

客户端日志级别：“无”

在 devServer 配置中

文档：https : //webpack.js.org/configuration/dev-server/#devserverclientloglevel

devServer.clientLogLevel

string: 'none' | 'info' | 'error' | 'warning'

使用内联模式时，DevTools 中的控制台将显示消息，例如在重新加载之前、错误之前或启用热模块替换时。默认为info.

devServer.clientLogLevel可能过于冗长，您可以通过将其设置为 来关闭注销'none'。

webpack.config.js

module.exports = {
  //...
  devServer: {
    clientLogLevel: 'none'
  }
};

通过 CLI 使用

webpack-dev-server --client-log-level none