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

使用

客户端日志级别："none"

在开发服务器配置中

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

devServer.clientLogLevel

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

When using inline mode, the console in your DevTools will show you messages e.g. before reloading, before an error or when Hot Module Replacement is enabled. Defaults to info.

devServer.clientLogLevel may be too verbose, you can turn logging off by setting it to 'none'.

webpack.config.js
module.exports = {
  //...
  devServer: {
    clientLogLevel: 'none'
  }
};
Usage via the CLI
webpack-dev-server --client-log-level none

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

Webpack suppress eslint warnings on browser console

node.js

eslint

webpack

`devServer.clientLogLevel`

`webpack.config.js`