React webpack bundle for production - reactjs

Question

I need some help to bundle my output for production but I have no idea how. Here's my webpack.config.js
module.exports = {
devtool: 'eval',
context: __dirname,
entry: "./js-source/index.jsx",
output: {
path: __dirname + "/scripts",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
exclude: /node_modules/
}
],
resolve: {
extensions: ['', '.js', '.jsx', '.json']
}
}
};
Here's my package.json
{
"name": "citygross-store-web",
"version": "2.0.0",
"dependencies": {
"axios": "^0.14.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-redux": "^4.1.2",
"react-responsive": "^1.3.0",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-transition-group": "^1.2.0",
"redux": "^3.1.2",
"redux-logger": "^2.6.1",
"redux-promise-middleware": "^4.0.0",
"redux-thunk": "^2.1.0"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.3.14",
"babel-preset-es2015": "^6.24.1",
"babel-preset-latest": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"babel-preset-stage-2": "^6.13.0",
"webpack": "^1.14.0",
"webpack-hot-middleware": "^2.12.2"
},
"scripts": {
"build": "webpack --colors",
"dev": "webpack --watch --colors"
},
"-vs-binding": {
"ProjectOpened": [
"dev"
]
}
}
How do you usually bundle for production? By adding a command like "npm run build" and having the other settings in that setting?
I would appreciate if someone could help me out how to set this up. Right now I can do "npm run dev" and "npm run build", however there's no difference between using the two more than "run dev" creates a -watcher and build builds the bundle one time.

Answer 1

Set the environment variable NODE_ENV to production when running your build script. This will cause the production build of React to be included in the output.
Easiest way is to add another script to your package.json:
"scripts": {
"build": "webpack --colors",
"buildprod": "NODE_ENV=production webpack --colors",
"dev": "webpack --watch --colors"
},
Now when you do npm run buildprod, you'll get a production build of your code.
Note: if you are on Windows, the above won't work right. For proper cross-OS you should use cross-env:
Install cross-env:
npm install cross-env --save-dev
or
yarn add cross-env --dev
Then make your scripts section look like:
"scripts": {
"build": "webpack --colors",
"buildprod": "cross-env NODE_ENV=production webpack --colors",
"dev": "webpack --watch --colors"
},