How to put React in production mode?

Question

I tried using the solution from here but the icon is still read indicating dev mode.

Here is my current file with updates from the answer below:

const path = require('path');
const SRC_DIR = path.join(__dirname, '/client-react/src');
const DIST_DIR = path.join(__dirname, '/client-react/dist');
const webpack = require('webpack')

module.exports = {
  entry: `${SRC_DIR}/index.jsx`,
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  plugins: [
    new webpack.DefinePlugin({'process.env': {NODE_ENV: JSON.stringify('production')} })
  ],
  module: {
      loaders: [
      {
        test: /\.jsx?/,
        include: SRC_DIR,
        loader: 'babel-loader',
        query: {
          plugins: ["transform-object-rest-spread", "transform-class-properties"],
          presets: ['react', 'es2015']
       }
      }
    ]
  }
};

What happens if you use the actual environment variable, as in `NODE_ENV=production ./node_modules/webpack/bin/webpack.js`? — rishat, Dec 20 '17 at 19:13
It seems to be correct, can you test if **production** is set as env variable?. You can do that with `console.log(process.env.NODE_ENV)` in your `index.js` — Arnold Gandarillas, Dec 29 '17 at 00:02

Arsen K. · Answer 1 · 2018-03-24T18:43:02.737

5

If you use Webpack 4, you don't need to change webpack.config.js. It remains the same in both development and production modes.

The only thing needed is in your package.json:

"scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
}

Having this, to create a development bundle:

npm run dev

Production bundle:

npm run build

edited Mar 24 '18 at 18:43

answered Mar 24 '18 at 18:34

Arsen K.

5,494
7
38
51

1

Webpack and React are different entities. So how does React know read the mode from webpack? – darKnight Jan 26 '22 at 18:16

score 2 · Answer 2 · answered Dec 28 '17 at 23:40

2

When you want to build your app in production mode, you should use webpack production shortcut. Like this:

webpack -p

This will enable webpack optimize options to minify your JS. See more detailed explanation of webpack flags on this SO answer.

answered Dec 28 '17 at 23:40

margaretkru

2,751
18
20

Do you have Webpack installed globally? – margaretkru Dec 30 '17 at 19:01
I think so. But if there is smth that doesn't work, you can always ask a new question :) – margaretkru Dec 30 '17 at 21:16

Chris · Answer 3 · 2017-12-21T13:47:18.513

1

Webpack plugins need to be put under the plugins key in module.exports.

https://webpack.github.io/docs/using-plugins.html#built-in-plugins

Try this:

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

edited Dec 21 '17 at 13:47

answered Dec 20 '17 at 19:12

Chris

298
4
8

Yes, that is what I meant. You may also need to add `const webpack = require('webpack')` at the top. Are you getting any errors? – Chris Dec 20 '17 at 20:27

score 0 · Answer 4 · answered Dec 29 '17 at 00:17

0

Had the same error so to fix it I did this:

package.json

"scripts": {
  "build": "NODE_ENV=production webpack --progress --colors",
  "start": "NODE_ENV=development webpack-dev-server --progress --colors"
}

webpack.config.js

const env = process.env.NODE_ENV

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(env)
    })
  ]
}

It should work for sure.

Here I have some configuration that you can try to optimize your build.

answered Dec 29 '17 at 00:17

Arnold Gandarillas

3,896
1
30
36

1

The reason why you can't run webpack from your command line is because it's installed locally. If you do `npm i -g webpack` you'll be able to use it anywhere but isn't recommended. – Arnold Gandarillas Dec 30 '17 at 19:56

score 0 · Answer 5 · answered Jul 22 '22 at 11:36

0

This worked for me: run npm run build followed by npm install -g serve and serve -s build

answered Jul 22 '22 at 11:36

Rm4n

623
7
14

How to put React in production mode?

5 Answers5