How to create production build in react application with Webpack 1.x

Question

I'm unable to create the production build for my react application. Actually, when I run npm run build command, It's getting the dist folder and successfully built. But, getting the Red Icon in browser when I run this build version. There is no error indicating for problem. I think I'm missing something for webpack configuration.

I've tried different ways but getting the solution for higher version and not specifically for webpack version 1.x

Tried:

Tried to set NODE_ENV in npm start and npm run build

Tried to set the production environment in webpack.prod.js file using DefinePlugin.

Result:

Still getting the Red Icon in React Developer Tool.

Here, is the more details for code which I'm running, Node packages installed:

"react": "15.3.2",
"webpack": "1.13.3",
"webpack-dev-server": "1.16.2",
"extract-text-webpack-plugin": "1.0.1"

packages.json > scripts

"start": "webpack-dev-server --config webpack.dev.js --inline --progress --port 7000 --open"
"build": "npm run clean && webpack --config webpack.prod.js --progress --profile --bail"

Webpack.prod.js

var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var path = require('path');

module.exports = webpackMerge(commonConfig, {

    output: {
        path: path.join(process.cwd(), '/dist'),
        publicPath: '/',
        filename: '[name].[hash].js'
    },

    plugins: [
        new webpack.NoErrorsPlugin(),
        new webpack.optimize.DedupePlugin(),
         new webpack.optimize.UglifyJsPlugin({
             mangle: {
                 keep_fnames: true,
                 except: ['$super']
             }
         }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        new ExtractTextPlugin('[name].[hash].css')
    ]
});

It would be great help if someone can point me the problem what I'm missing. Thanks in advance.

PlayMa256 PlayMa256 · Accepted Answer · 2018-07-31T11:36:34

Add cross-env, which helps setting env variables cross os.

Then on your npm scripts: "build": "cross-env NODE_ENV=production npm run clean && webpack --config webpack.prod.js --progress --profile --bail"

How to create production build in react application with Webpack 1.x

1 Answers