即使在使用 DefinePlugin 后也反应错误答案

【问题标题】：React error even after using DefinePlugin即使在使用 DefinePlugin 后也反应错误
【发布时间】：2017-02-01 12:19:58
【问题描述】：

我正在使用带有 Webpack 的 React 15.4.2 和 Redux 3.6.0，这是我的 webpack.config.js 文件内容：（为简洁起见，省略了一些代码）

const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');

const pkg = require('./package.json');

const TARGET = process.env.npm_lifecycle_event;
const PATHS = {
  src: path.join(__dirname, 'src/js'),
  dist: path.join(__dirname, 'dist')
};

process.env.BABEL_ENV = TARGET;

const common = {
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  entry: {
    app: PATHS.src
  },
  output: {
    path: PATHS.dist,
    publicPath: '/',
    filename: '[name].[hash].js'
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loaders: ['babel?cacheDirectory'], include: PATHS.src },
      { test: /\.scss$/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] },
      { test: /(\.ttf|\.woff2?|\.eot|\.svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, exclude: /node_modules/, loader: 'url' },
      { test: /\.(jpe?g|png|gif|svg)$/i, exclude: /node_modules/, loader: 'url?limit=10000!img?progressive=true' },
      { test: /\.json/, loaders: ['json']}
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      template: 'src/index.html',
      inject: 'body'
    })
  ]
};

if (TARGET === 'build') {
  module.exports = merge(common, {
    entry: {
      vendor: Object.keys(pkg.dependencies)
    },
    output: {
      path: PATHS.dist,
      filename: '[name].[chunkhash].js',
      chunkFilename: '[chunkhash].js'
    },
    module: {
      loaders: [
        { test: /\.css$/, loader: ExtractTextWebpackPlugin.extract('style', 'css'), include: PATHS.src }
      ]
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
      }),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      }),
      new CleanWebpackPlugin([PATHS.dist]),
      new ExtractTextWebpackPlugin('[name].[chunkhash].css'),
      new webpack.optimize.CommonsChunkPlugin({
        names: ['vendor', 'manifest']
      })
    ]
  });
}

运行npm run build 给出了缩小的代码。但它仍然给出错误

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. See https://facebook.github.io/react/docs/optimizing-performance.html#use-the-production-build for more details.

我也尝试在 build TARGET 中重新排序插件，但它给出了同样的错误。

我在这里错过了什么？

附： Redux 也给出了相同的缩小错误。

编辑

这是我的 package.json 构建脚本：

"scripts": {
  ...
  "build": "NODE_ENV=production webpack --progress"
  ...
}

编辑#2

这是应用程序中 console.log 语句的输出。

【问题讨论】：

它给你错误，因为在编译代码时，你的 NODE_ENV 没有设置为生产，它是别的东西。在运行 webpack 之前尝试执行 export NODE_ENV=production
这是我的构建脚本："build": "NODE_ENV=production webpack --progress"
如果你是在本地环境中测试，那么不要使用 webpack 的 UglifyJs 插件。
那么，我应该使用 -p 选项缩小吗？ @Vikramaditya
不，不要对本地环境进行任何缩小/优化，只在生产中使用这些东西。

标签： reactjs webpack redux

【解决方案1】：

您可以将此语法用于 DefinePlugin。

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production')
  }
}),

【讨论】：

我只是将两个配置文件分开，一个用于开发，一个用于生产。生产构建的命令是“webpack --config webpack-production.config.js --progress --colors”。
即便如此，添加插件的语法也是两者之一。这些都不起作用。
产品。您在浏览器中显示的环境表明它处于“生产”环境中，这是正常的。但是，问题应该是在 webpack 构建过程中，节点 env 不是“生产”。当您在生产环境中运行该输出时，这会导致警告。

【解决方案2】：

我启用了源映射以查看它是我一直在使用的一个包，它是使用非标准方式缩小的。因此，将 NODE_ENV 设置为“生产”对上述包没有影响。尽管如此，我的 Webpack 配置和构建脚本都运行良好。谢谢你们的帮助！

【讨论】：