Webpack not giving react production build

Question

I am using webpack and babel for JSX and minified production build .Config looks like this

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;

Everything working except I am seeing on react dev tools that I am using dev build on production even after using production webpack -p build. Any idea what I am doing wrong over here?? I am new to webpack and applied the optimization method given their documentation with no luck. Thanks in advance :)

Answer 1

My current webpack configuration file that doesn't give above mentioned error.

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',
        }]
      }
    ]
  },
};

and following is my gulp task for webpack. I am using gulp to automate tasks but you can simply use webpack command.

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)});
  });

Answer 2

using wepack -p is equivalent to webpack --optimize-minimize --define process.env.NODE_ENV="'production'" It will optimize and minify your code so you don't need to explicitly add the Uglify or an other plugin to your webpack config file. It's useful when you want to use the same configuration script for dev and production.

Thus, you don't need any plugin to define your environment variable nor minify your code. Setting up plugins: [] will solve your problem. So your package.json will look like this: "build:dev": "webpack", "build:prod": "webpack -p"

Moreover, if your not very confident with webpack, I strongly advice you to use the create-react-app tool to start your application.