CODEWITHSUNDEEP
reactjswebpack
kilogram
kilogram

Reputation: 717

Add production into development React Webpack config

I have a simplest possible React environment. That is very efficient in development.

var webpack = require('webpack');

const config = {
  entry: "./index.js",
  output: { filename: "bundle.js" },
  devtool: 'eval',
module: {
   loaders: [
    {  test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, query: { presets: ['react', 'env'] }  }
   ]
  }
};

module.exports = config;

What I want to do is to add a production build so as to run in console script like this: npm run build, which is defined in package.json:

"build": "webpack --config webpack.config.js"

How can I add production plugins and devtool: "cheap-module-source-map" so that they will work only in production and were not included into development. By production plugins I meant these:

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

I failed to use 

var debug = process.env.NODE_ENV !== "production";

with devtool: debug ? "cheap-module-source-map" : "eval", and

plugins: debug ? [] : [//production plugins here ]

Upvotes: 0

Views: 603

Answers (2)

Rhymmor
Rhymmor

Reputation: 41

It's common practice to create a separate file for production config and to change properties there.

webpack.config.production.js:

var webpack = require('webpack');
var config = require('./webpack.config');

config.devtool = 'cheap-module-source-map';
config.plugins = (config.plugins || []).concat([
    new webpack.DefinePlugin({ 
        'process.env.NODE_ENV': JSON.stringify('production') 
    }),
    new webpack.optimize.UglifyJsPlugin()
]);

module.exports = config;

Upvotes: 1

olore
olore

Reputation: 4847

It sounds like you are having trouble with the environment variables, which is definitely the way to go. If you post more details I can help figure out the problem.

As an alternative, you can copy your dev config to a file called webpack-prod.config.js and add your production stuff there. Then run it using "build": "webpack --config webpack-prod.config.js"

Upvotes: 1

Related Questions