You are currently using minified code outside of N

问题:

I've created a basic app and deployed it for production. After running webpack -p and starting the server, I am now getting this console log error:

You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.

Here is my webpack.config.js file:

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

Am very new to React and Webpack especially. If anyone could kindly point out what's wrong and help me wrap my head around webpack (which is very confusing) then it would be forever thankful!

EDIT:

I added the webpack plugin and ran NODE_ENV=production webpack -p and got this error in terminal:

/Users/Joseph/workspace/weather-fcc/webpack.config.js:27
    new webpack.DefinePlugin({
        ^

ReferenceError: webpack is not defined
    at Object.<anonymous> (/Users/Joseph/workspace/weather-fcc/webpack.config.js:27:9)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:96:18)
    at /usr/local/lib/node_modules/webpack/bin/convert-argv.js:109:17` FWIW my webpack version is 1.12.9

回答1:

Webpack 4 Update

If you're using webpack >= 4, you can set mode to production. This will automatically define NODE_ENV to production without needing to use the define plugin. https://webpack.js.org/concepts/mode/#mode-production.

It also seems that webpack has updated the -p flag to automatically define process.env.NODE_ENV to production in your bundled code (thanks @x-yuri for pointing this out). So while the answer below is now unnecessary, I'm keeping it there for reference and also as an explanation of how the webpack define plugin works.

Original answer + explanation

TLDR: Use the webpack define plugin to set process.env.NODE_ENV to production.

Long version:

React, Redux, and many other JS libraries include extra verifications and error logging that make development easier. However, you obviously don't want this in production since these make your codebase larger and slower. These checks are usually wrapped in statements that look like this:

if (process.env.NODE_ENV !== 'production') {
  // do development checks
}

The error you're getting is Redux telling you that although you've minified the code, process.env.NODE_ENV isn't set to production, so the development checks are still in place. To fix this, you'll want to use the webpack define plugin to set process.env.NODE_ENV to production.

var webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ]
};

Note that I'm defining the value of process.env.NODE_ENV to whatever it's set to for you when you run webpack. So to generate your production bundle, you'll want to run NODE_ENV=production webpack -p, not just webpack -p. This will replace any instance of process.env.NODE_ENV with production in your bundle. So that check that I showed above will now look like this:

if ('production' !== 'production') {
  // do development checks
}

Minifiers are smart enough to detect that the code in the if statement will never happen and will remove it from your production bundle. Thus, you get the best of both worlds: a better development experience and no extra code in your production bundle :)