Skip to content
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
146 lines (109 sloc) 4.24 KB
date title thumbnail slug template categories tags
webpack: Building React For Production on Windows

I ran into some unexpected errors while trying to build React for production using a Windows machine (which was undocumented in the React docs. No love for Windows machines? =p).

The below is just some documentation of my research for personal reference.

Mac OS: Package.json webpack Build Script

The React docs provide the following script:

  "scripts": {
    "build": "NODE_ENV='production' webpack -p"

Windows: Package.json webpack Build Script

However, trying to run the above script on a Windows machine (even using cygwin) will give you the error:

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

The script needs to be run slightly differently on Windows machines:

  "scripts": {
    "build": "set NODE_ENV=production && webpack -p"

Understanding The Scripts

1. package.json: Optimizing webpack for Production

The webpack production flag webpack -p is shorthand for --optimize-minimize --optimize-occurrence-order.

--optimize-minimize: Minimize scripts and CSS (if using css-loader).

--optimize-occurrence-order: webpack assigns IDs to modules and chunks (I believe for caching validation purposes). --optimize-occurrence-order makes sure that commonly used ids will have a smaller id length.

// Set NODE_ENV for webpack to 'production'
// Use the webpack 'production' shortcut, -p
  "scripts": {
    "build": "set NODE_ENV=production && webpack -p"

2. webpack.config.js: Build React for Production and Minify JS

In webpack, DefinePlugin,allows creating global constants that can be configured at compile time. This provides flexibility for different behaviors between development builds and release builds.

Tell React to use the production version of React

This instance of DefinePlugin performs a search-and-replace on the original source code, and instances of process.env.NODE_ENV in the imported code is replaced by "production".

React's internals has references to process.env.NODE_ENV. When set to, "production", React removes warning messages to reduce file-size and increase performance.

new webpack.DefinePlugin({
  "process.env.NODE_ENV": JSON.stringify("production")

Make webpack Minify Javascript code

webpack comes with UglifyJsPlugin, and uses UglifyJS to minimize the output.

new webpack.optimize.UglifyJsPlugin();

Complete webpack.config.js

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let webpack = require("webpack");

let config = {
  entry: "./app/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.bundle.js",
    publicPath: "/"
  module: {
    rules: [
        test: /\.js$/,
        use: "babel-loader"
        exclude: /(node_modules)/,
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
  devServer: {
    historyApiFallback: true
  plugins: [
    new HtmlWebpackPlugin({
      template: "app/index.html"

if (process.env.NODE_ENV === "production") {
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production")
    new webpack.optimize.UglifyJsPlugin()

module.exports = config;
You can’t perform that action at this time.