redux 当使用react hot reloading时,我如何抑制webpack中的日志?

pepwfjgg  于 2022-11-12  发布在  React
关注(0)|答案(2)|浏览(131)

我正在使用这个react redux初学者工具包https://github.com/coryhouse/pluralsight-redux-starter,并且在我的控制台中得到以下输出

[HMR] connected

我尝试将Web包配置中的以下字段切换为true和false,但没有任何帮助

noInfo: true,
  debug: false,

我怎样才能把这些日志关掉?

umuewwlo

umuewwlo1#

尝试了许多解决方案,dev服务器选项clientLogLevel: "none"的含义最接近,但无法使其工作。
后来我找到了一个变通办法:
1.使用NODE_ENV=development运行您的应用;对于此,请转到package.json并更新scripts

"scripts": {
  "build": "webpack",
  "start": "NODE_ENV=production webpack-dev-server --progress --inline --hot",
  "dev": "NODE_ENV=development webpack-dev-server --progress --inline --hot"
}

1.修改webpack.config.js

plugins: [
  new webpack.DefinePlugin({
    __DEVELOPMENT__: process.env.NODE_ENV !== 'production',
  })
],

DefinePlugin允许您创建可在编译时配置的全局常量。

global.console.log替换为一个自定义的console_log,过滤掉[HMR][WDS]日志。
将下面的代码添加到您的development.js(根据process.env.NODE_ENV !== 'production'值有条件地附加到webpack.config.js中的entry的文件)

(function(global) {
    var console_log = global.console.log
    global.console.log = function() {
        if (!(
            arguments.length == 1 &&
            typeof arguments[0] === 'string' &&
            arguments[0].match(/^\[(HMR|WDS)\]/)
        )) {
            console_log.apply(global.console,arguments)
        }
    }
})(window)
  1. npm run dev
    如果你已经使用了DefinePlugin,那么我们现在在客户端有了全局常量__DEVELOPMENT__ === true。所以在每次刷新时,你可以这样做:
if (__DEVELOPMENT__) {
  console.clear();
}
exdqitrt

exdqitrt2#

在版本〉= 4.0.0的Webpack上,您可以保留热重新加载功能,但将日志限制为devServer下的错误,如下所示:

devServer: {
  hot: true,
  client: {
    overlay: false,
    logging: 'error',
  }
  ...
}

您可以在www.example.com上找到有关它的更多信息https://webpack.js.org/configuration/dev-server/#logging

相关问题