Question

我在web应用程序上使用webpack + react + redux。我正在使用webpack-dev-server来启动开发Web服务器。当我在浏览器上访问我的应用程序时，它会在控制台上显示以下错误消息：

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. 

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify  to ensure you have the correct code for your production build.

下面是我的webpack.config.js文件。我没有指定生产模式，为什么webpack给我这样的警告信息？我怎么能摆脱它？

const webpack = require('webpack');
const path = require('path');
const NpmInstallPlugin = require('npm-install-webpack-plugin');
const WebpackShellPlugin = require('webpack-shell-plugin');
var CompressionPlugin = require("compression-webpack-plugin");

const PATHS = {
  react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),
  app: path.join(__dirname, 'src'),
  build: path.join(__dirname, './dist')
};

module.exports = {
  entry: {
    app: './app/index.jsx',
    android: './app/utils/platform_android.js',
    ios: './app/utils/platform_ios.js',
    web: './app/utils/platform_web.js',
    vendor: [
      'axios',
      'react',
      'react-dom',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux',
      'redux-thunk',
      'react-alert',
      'sha1',
      'moment',
      'nuka-carousel',
      'react-cookie',
      'material-ui',
      'react-spinkit',
      'react-tap-event-plugin',
      'react-tappable',
    ],
  },
  output: {
    path: PATHS.build,
    filename: '[name].bundle.js',
  },
  watch: true,
  devtool: 'source-map',
  relativeUrls: true,
  resolve: {
    extensions: ['', '.js', '.jsx', '.css', '.less'],
    modulesDirectories: ['node_modules'],
    alias: {
      normalize_css: __dirname + '/node_modules/normalize.css/normalize.css',
    }
  },
  module: {
    preLoaders: [

      {
        test: /\.js$/,
        loader: "source-map-loader"
      },
      // {
      //   test: /\.js$/,
      //   exclude: /node_modules/,
      //   loader: 'jshint-loader'

      // }
    ],
    loaders: [

      {
        test: /\.html$/,
        loader: 'file?name=[name].[ext]',
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader?presets=es2015',
      },
      {
        test: /\.less$/,
        loader: "style!css!less",
      },
      {test: /\.css$/, loader: 'style-loader!css-loader'},
      {test: /\.png$/, loader: "url-loader?limit=100000"},

      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['babel-loader?presets=es2015']
      },
      {
      test: /\.svg$/,
      loader: 'svg-sprite',
      include: /public\/icons/
    }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
      output: {
        comments: false,
      },
    }),
    new NpmInstallPlugin({
      save: true // --save
    }),

    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
    }),
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */["vendor"], /* filename= */"[name].bundle.js", Infinity),
  ],
  devServer: {
    colors: true,
    contentBase: __dirname,
    historyApiFallback: true,
    hot: true,
    inline: true,
    port: 9093,
    progress: true,
    stats: {
      cached: false
    }
  }
}

EDIT1 ：

我删除了这一行：

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),

然后将NODE_ENV更新为开发，如下所示：

new webpack.DefinePlugin({
      "process.env": {
        NODE_ENV: JSON.stringify("development")
      }
    })

然后我仍然得到同样的警告。

warning.js:14You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

Answer 1

我不知道怎么说比webpack更清楚......

您不是生产构建模式，而是使用缩小版的React。使用非缩小的，请替换

react: path.join(__dirname, 'node_modules/react/dist/react.min.js'),

带

react: path.join(__dirname, 'node_modules/react/dist/react.js'),

或您的反应未缩小的任何地方。

这不是错误 - 这是一个警告，所以你仍然可以使用这个。

顺便说一句：path.join为每个操作系统添加适当的斜杠。你在这里做的是

path.join(__dirname, 'node_modules/react/dist/react.min.js')

何时应该

path.join(__dirname, 'node_modules', 'react', 'dist', 'react.min.js')

这是path应该正确使用的方式

Answer 2

您现在收到的警告是因为您让Webpack缩小了构建范围，但仍然将NODE_ENV设置为development。

如果您使用UglifyJsPlugin，则应始终将NODE_ENV设为production。如果您未投放生产，请移除UglifyJsPlugin以免收到任何警告。

Webpack，React和Redux尝试在这里给你一些最佳实践提示。在开发模式（NODE_ENV未设置为production）中，它们都会发出更多警告并且性能更低。当你缩小它们时，它们会假设你正在运行一个生产版本。对于生产版本，他们确实希望正确设置NODE_ENV。

简而言之：

制作版本：将NODE_ENV设置为production并使用UglifyJsPlugin。
开发构建：将NODE_ENV设置为development，不要使用任何缩小插件。

Answer 3

我通过从webpack.config.js中删除以下配置来修复它以进行开发构建。看来这个插件会压缩不适合开发模式的js代码。

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
  },
  output: {
    comments: false,
  },
})

为什么webpack会出现关于NODE_ENV的错误？

3 个答案: