Webpack 没有提供反应生产版本答案

【问题标题】：Webpack not giving react production buildWebpack 没有提供反应生产版本
【发布时间】：2017-10-07 19:08:51
【问题描述】：

我正在为 JSX 使用 webpack 和 babel，并且缩小的生产构建 .Config 看起来像这样

var webpack = require('webpack');

var fileNames = [
   'module1',
  //'module2', 
];

function giveMeConfig(filename) {
  return {
       entry: './app/pages/' + filename + '.js'
       ,
       output: {
           filename: './public/' + filename + '.js'
       },
       module: {
           plugins: [
              new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
              }),
              new webpack.optimize.UglifyJsPlugin(),
              new webpack.optimize.OccurenceOrderPlugin()
           ],
           loaders: [
               {
                   test: /(\.jsx|\.js)$/,
                   exclude: /(node_modules|bower_components)/,
                   noParse: /node_modules\\json-schema\\lib\\validate\.js/,
                   loader: 'babel',
                   query: {
                       presets: ['react'],
                       compact: false
                   }
               }
               ,
               {
                   test: /\.json$/, loader: 'json-loader'
               }
           ]
       },
       node: {
           console: false,
           fs: 'empty',
           net: 'empty',
           tls: 'empty'
       }

   }
}

var configAr = [];

for (var i = 0; i < fileNames.length; i++) {
  configAr.push(giveMeConfig(fileNames[i]));
}

module.exports = configAr;

除了我在反应开发工具上看到的一切正常，即使在使用生产webpack -p 构建之后，我也在生产上使用开发构建。知道我在这里做错了什么吗？我是 webpack 的新手，并且根据他们的文档应用了优化方法，但没有运气。在此先感谢:)

【问题讨论】：

我不习惯像这样基于每个文件名配置 Webpack。您如何使用configAr / module.exports？看起来您正在尝试为您自己的模块（filenames 中的任何内容）传递 NODE_ENV=production，但要获得 React 的生产版本，您是否还需要为 React 设置 NODE_ENV=production？跨度>
@JoshKelley 怎么做？没看清楚

标签： javascript reactjs npm webpack babeljs

【解决方案1】：

我当前的 webpack 配置文件没有给出上述错误。

var path = require('path');
var webpack = require('webpack');
var package=require('./package.json');
var config = require('./config');
var ManifestPlugin = require('webpack-manifest-plugin');


const ExtractTextPlugin = require('extract-text-webpack-plugin');
var getPlugins = function(){
  var pluginsList = [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.bundle_[hash].js'
    }),

    // new webpack.DefinePlugin({
    //   'process.env': { NODE_ENV: JSON.stringify(config.env) }
    // }),
    new webpack.DefinePlugin({
      "process.env": {
         NODE_ENV: JSON.stringify("production")
       }
    }),
    new webpack.NamedModulesPlugin(),
    new ManifestPlugin({
      fileName: 'build-manifest.json'
    })
  ];
  if(config.envConfig.IS_PRODUCTION ){
    pluginsList.push(new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }));
    pluginsList.push(new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      },
      sourceMap: false,
      minimize: true
    }));
  }
  return pluginsList;
}



module.exports = {
  cache: true,
  output: {
    path:path.join(__dirname, "dist/js"),
    filename: "[name]_[hash].js",
    chunkFilename:"[name]_[hash].js",
    publicPath:config.envConfig.JS_ASSETS_PATH
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8080
  },

  entry: {
    index: [
      package.paths.app
    ],
    vendor: [
      'react', 'react-dom','phrontend',
      'react-ga'
    ]
  },
  plugins: getPlugins(),
  target: 'web',

  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
        }]
      }
    ]
  },
};

以下是我对 webpack 的 gulp 任务。我正在使用 gulp 来自动执行任务，但您可以简单地使用 webpack 命令。

var gulp = require('gulp');
var exec = require('child_process').exec;
var webpack = require('webpack');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('webpack:watch', function() {
  gulp.watch(GLOBAL.config.src+'/**/*.{js,jsx}', ['webpack',reload]);
});
gulp.task('webpack:clean', function(cb) {
  del([GLOBAL.config.dest + '/js/*.js*'], {dot: true})
  .then(function() {
    cb();
  });
});



gulp.task('webpack', function(cb) {
  runSequence(
    'webpack:execute',
    'replace-scripts-source',
    cb);
  });

  gulp.task('webpack:execute', ['webpack:clean'], function(cb) {
    exec('webpack'+ " --env=" + GLOBAL.config.env , function (err, stdout, stderr) {
      console.log(stdout);
      console.log(stderr);
      cb(err);
    }).stdout.on('data',function(data){console.log(data)});
  });

【讨论】：

【解决方案2】：

使用wepack -p 等价于webpack --optimize-minimize --define process.env.NODE_ENV="'production'" 它将优化和缩小您的代码，因此您无需将 Uglify 或其他插件显式添加到您的 webpack 配置文件中。当您想为开发和生产使用相同的配置脚本时，它很有用。

因此，您不需要任何插件来定义您的环境变量或缩小您的代码。设置plugins: [] 将解决您的问题。所以你的 package.json 看起来像这样： "build:dev": "webpack", "build:prod": "webpack -p"

另外，如果你对 webpack 不是很自信，我强烈建议你使用 create-react-app 工具来启动你的应用程序。

【讨论】：