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

使用

clientLogLevel：“none”

config中的

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

devServer.clientLogLevel

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

使用内嵌模式时，DevTools中的控制台会显示消息，例如重新加载之前，错误之前或启用Hot Module Replacement之前。默认为info。

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

webpack.config.js
module.exports = {
  //...
  devServer: {
    clientLogLevel: 'none'
  }
};
通过CLI使用
webpack-dev-server --client-log-level none

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

2 个答案:

`devServer.clientLogLevel`

`webpack.config.js`