使用 Webpack 2 控制 console.log 输出答案

【问题标题】：Controlling console.log output with Webpack 2使用 Webpack 2 控制 console.log 输出
【发布时间】：2017-03-07 18:16:38
【问题描述】：

我最近升级到了 Webpack 2，现在我在浏览器中的所有 console.logs 以及所有 redux-logger 输出以及所有 JavaScript 错误和警告都消失了。

我有两个配置 - 用于开发和测试。它们几乎相同，但 dev 有 console.logs 而 test 没有。如何在测试中启用它们？

这里是具有 console.logs 的开发者：

const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: [
    'bootstrap-loader',
    'webpack-hot-middleware/client',
    './src/index',
  ],

  output: {
    publicPath: '/dist/',
  },

  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader', options: { localIdentName: '[path][name]--[local]' } },
        { loader: 'postcss-loader', options: { plugins: function () { return [ require('autoprefixer') ]; }}},
        { loader: 'sass-loader' },
      ]
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
      ],
    }],
  },

  devServer: {
    hot: true,
    contentBase: '/dist/',
    publicPath: '/dist/'
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: '"development"' },
      __DEVELOPMENT__: true,
    }),
    new ExtractTextPlugin({ filename: 'bundle.css' }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
};

这是测试，不是，但应该：

const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  devtool: 'source-map',

  entry: ['bootstrap-loader/extractStyles'],

  output: {
    publicPath: 'dist/',
  },

  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        { loader: 'style-loader' },
        { loader: 'css-loader' },
        { loader: 'postcss-loader', options: { plugins: function () { return [ require('autoprefixer') ]; }}},
        { loader: 'sass-loader' },
      ]
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
      ],
    }],
  },

  plugins: [
    new webpack.DefinePlugin({
      'process.env': { NODE_ENV: '"test"' },
      __DEVELOPMENT__: true,
    }),
    new ExtractTextPlugin({ filename: 'bundle.css' }),
    new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
  ],
};

起初怀疑是 Uglify 插件，尝试删除它 - 没有结果。什么给了？

【问题讨论】：

什么样的console.log？来自您的应用（显式调用 console.log）还是来自构建工具（例如 HMR 消息）？
是的，从应用程序，从redux-logger等console.log在浏览器中可见

标签： javascript webpack-2

【解决方案1】：

在测试配置中，entry 不包含您的应用。因此它不会被捆绑并且您的console.logs 不会被调用，因为它们不存在，实际上您的整个应用程序都被排除在外。因此，您还需要在测试配置中包含您的应用入口点：

entry: ['bootstrap-loader/extractStyles', './src/index'],

【讨论】：

该应用程序运行良好，只是 console.logs 不存在。事实上，在 Webpack 1 上一切正常。试试你的东西，看看会发生什么。
这应该是不可能的。但也许您仅在开发中启用了redux-logger（当process.env.NODE_ENV === 'development' 时），如Log only in development 所示。
我的是谓词： () => ((process.env.NODE_ENV === 'development') || (process.env.NODE_ENV === 'test')) ，所以它应该为两者工作。一切正常，直到升级到 webpack 2，我按照他们的迁移指南，只更改了 webpack 配置。而且它不仅仅是 redux-logger - 任何 JavaScript 错误/警告也会被抑制