如何配置Webpack以清除生产缩小的React警告？

Question

我相信每个人都看到了这个错误但是又来了：

警告：看起来您正在使用React的开发版本的缩小副本。 在将React应用程序部署到生产环境时，请确保使用生成构建，该构建会跳过开发警告并且速度更快。 有关详细信息，请参阅https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build 。

所以当然我按照提供的链接中的说明，虽然我已经对我的代码进行了所有必要的更新，但我仍然收到此错误。

根据我在StackOverflow和Github上看到的其他一些答案， process.env.NODE_ENV通过Webpack插件设置为production ， DefinePlugin告诉React使用缩小版本进行构建。 所以我在我的主应用程序组件中记录了process.env.NODE_ENV ，它实际上是由插件设置为production的，但我仍然收到警告。

所以即使环境变量被设置为生产，我也会收到警告，我的React Dev Tools说：

此页面正在使用React的开发版本。 🚧请注意，开发版本不适合生产。 确保在部署之前使用生产版本。

我似乎无法隔离问题所在的位置，因为我已经完成了所有必要的更改以使生产构建工作。

这是我的webpack.config.js文件：

const webpack = require('webpack');
const resolve = require('path').resolve;
const SRC_BASE = resolve(__dirname, 'src');
const merge = require('webpack-merge');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const argv = require('yargs').argv;
const HtmlWebpackPlugin = require('html-webpack-plugin');

const definePlugin = new webpack.DefinePlugin({
  __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
  __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')),
  __PRODUCTION__: JSON.stringify(JSON.parse(process.env.NODE_ENV === 'production' || 'false')),
  'process.env': {
    NODE_ENV: process.env.NODE_ENV === 'production' ? // set NODE_ENV to production or development
      JSON.stringify('production') : JSON.stringify('development'),
  },
});

const loaderOptionsPlugin = new webpack.LoaderOptionsPlugin({ options: { context: __dirname } });
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
const cssOutput = new ExtractTextPlugin({ filename: 'style.css', allChunks: true });
const sourceMapPlugin = new webpack.SourceMapDevToolPlugin({ filename: '[name].map' });
const htmlPlugin = new HtmlWebpackPlugin({
  template: `${SRC_BASE}/index.template.ejs`,
  filename: '../index.html', // relative to public/build/ so this is public/index.html
  inject: true,
  hash: true,
});

let config = {
  cache: true,
  entry: {
    main: ['babel-polyfill', resolve(SRC_BASE, 'index')],
  },
  output: {
    path: resolve(__dirname, 'public/build'),
    filename: '[name].bundle.js',
    publicPath: '/build/',
    sourceMapFilename: '[name].map',
  },
  resolve: {
    modules: [
      SRC_BASE,
      'node_modules',
    ],
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      {
        test: [/\.jsx$/, /\.js$/],
        loader: 'babel-loader',
        exclude: /(local_modules|node_modules|bower_components)/,
        query: {
          presets: [
            'react',
            'es2015',
            'stage-1',
          ],
        },
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'file-loader',
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader!sass-loader',
        }),
      },
    ],
  },
  node: {
    fs: 'empty',
  },
  plugins: [
    definePlugin,
    commonsPlugin,
    cssOutput,
    htmlPlugin,
    loaderOptionsPlugin,
    sourceMapPlugin,
  ],
};

// Only load dashboard if we're watching the code
if (argv.watch) {
  const DashboardPlugin = require('webpack-dashboard/plugin');
  config = merge(config, { plugins: [new DashboardPlugin()] });
}

if (process.env.NODE_ENV === 'production') {
  console.log('******* I AM MERGING PRODUCTION CONFIGS ******');
  console.log(`process.env.NODE_ENV = ${process.env.NODE_ENV}`);
  config = merge(config, {
    devtool: 'cheap-module-source-map',
    plugins: [
      new webpack.LoaderOptionsPlugin({
        minimize: true,
        debug: false,
      }),
      new webpack.optimize.UglifyJsPlugin(),
    ],
    module: {
      rules: [
        { test: /redux-logger/, loader: 'null-loader' },
      ],
    },
  });
}

module.exports = config;

这是我的gulpfile.js任务运行gulpfile.js gulp build --production ：

/* Production Builds use this task */
gulp.task('webpack', (done) => {
  if (argv.production) {
    process.env.BUILD_DEV = false;
    process.env.NODE_ENV = 'production';
  }

  const buildConfig = require('./webpack.config');
  const compiler = webpack(buildConfig);
  const tag = '[webpack]';
  const info = gutil.colors.green;
  const error = gutil.colors.red;
  const warning = gutil.colors.yellow;

  const filterStackTraces = err =>
      err.toString().split(/[\r\n]+/).filter(line => ! line.match(/^\s+at Parser/)).join(EOL);

  if (argv.watch) {
    compiler.watch({}, (err, stats) => {
      const statDetails = stats.toJson();
      if (err) {
        gutil.log(error(tag), err.toString({ colors: true }));
      }
      else if (stats.hasErrors()) {
        statDetails.errors.forEach(ex => gutil.log(error(tag), filterStackTraces(ex)));
      }
      else if (stats.hasWarnings()) {
        statDetails.warnings.forEach(wx => gutil.log(warning(tag), filterStackTraces(wx)));
      }
      else {
        statDetails.chunks.forEach(chunk => {
          if (chunk.entry) gutil.log(info(tag), `Built ${chunk.files[0]} (${chunk.size} bytes)`);
        });
        gutil.log(info(tag), 'Build complete');
      }
    });
  }
  else {
    compiler.run((err, stats) => {
      if (err) {
        return done(new gutil.PluginError('webpack', err));
      }
      if (stats.hasErrors()) {
        const statDetails = stats.toJson();
        statDetails.errors.forEach(ex => gutil.log(error(tag), filterStackTraces(ex)));
        return done(new gutil.PluginError('webpack', 'Parse/ build error(s)'));
      }
      gutil.log(gutil.colors.green(tag), stats.toString({ colors: true }));
      done();
    });
  }
});

gulp.task('build', ['webpack']);

Answer 1

在使用各种不同的方法来配置webpack以解决这个问题之后， 我在interbb周围绊倒了， 我在UglifyJsPlugin中找到了一个清除错误的配置选项 。

plugins: [
    new webpack.optimize.UglifyJsPlugin({
      include: /\.min\.js$/, <------This option fixed it
    })
  ]

虽然这清除了控制台中的警告，但我仍然看到我的React Dev Tools说它没有使用生产版本。

Answer 2

我有同样的问题，但它似乎不是webpack的问题 - 它可能与Gulp有关。 您是否尝试直接从命令行运行webpack（即webpack --config webpack-build.config.js或其他）？ 这产生了一个没有警告的构建非常愉快。 这是我的webpack配置，从各种来源拼凑而成：

 const path = require('path') const webpack = require('webpack') module.exports = { devtool: 'cheap-module-source-map', entry: './src/scripts/app', output: { path: path.join(__dirname, 'dist/scripts'), filename: 'bundle.js', publicPath: '/static/' }, module: { loaders: [ { test: /\\.js$/, loader: 'babel-loader', query: { presets: ['env', 'react'] } } ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new webpack.LoaderOptionsPlugin({ minimize: true, debug: false }), new webpack.optimize.UglifyJsPlugin({ beautify: false, mangle: { screw_ie8: true, keep_fnames: true }, compress: { screw_ie8: true }, comments: false }) ] } 

如果我跟踪gulp + webpack发生了什么，我会写一个更新。