Question

我正在使用React 15.4.2和Redux 3.6.0和Webpack，这是我的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.

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

我在这里缺少什么？

P.S。 Redux也给出了同样的缩小错误。

修改

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

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

编辑＃2

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

Answer 1

您可以将此语法用于DefinePlugin。

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

Answer 2

我启用了源映射，以查看我使用的包使用非标准方法缩小的包。因此，将NODE_ENV设置为＆＃39; production＆＃39;对上述包裹没有影响。不过，我的Webpack配置和我的构建脚本一直运行得很好。谢谢你的帮助！

使用DefinePlugin后即使出现反应错误

2 个答案: