为什么 webpack 给出了大约 NODE_ENV 的错误？

Question

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

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 ( 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 的错误？

Why webpack gives an error for about NODE_ENV?

node.js

webpack

webpack-dev-server