Question

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

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

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

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

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

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

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

这是我的production文件：

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;的{{1}}个任务：

gulpfile.js

Answer 1

在interweb周围绊倒了一些不同的方法来配置webpack以解决UglifyJsPlugin中清除错误的I found a configuration option问题。

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的动态，我会写一个更新。

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

2 个答案: