reactjswebpackwebpack-production

Changing React dev mode to production mode


I can't find anything useful to help me understand how can I change dev mode to production mode in React. Do I have do install any additional packages? What are the best plugins to minify my js and css files?

This is my webpack.config:

module.exports = {
entry: ["whatwg-fetch", "./js/app.jsx"],
output: {
    filename: "./js/out.js"
},
devServer: {
    inline: true,
    contentBase: './',
    port: 3001
},
watch: true,

module: {
    loaders: [{
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
            presets: ['es2015','stage-2', 'react']
        }
    }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader' , 'sass-loader',]
    },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[path][name].[ext]'
                    }
                }
            ]
        }
    ]
}
};

Solution

  • As for webpack v4 use mode:

    module.exports = {
      mode: 'production',
      entry: ["whatwg-fetch", "./js/app.jsx"],
      output: {
        filename: "./js/out.js"
      },
    

    This will set process.env.NODE_ENV to production.

    for earlier versions use WebpackDefinePlugin to set NODE_ENV:

    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
    ]