How to set mode to development or production in the config file?

Question

We are migrating to webpack 4. We do have dev / prod config files already. We started getting this warning message:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' 
or 'production' to enable defaults for this environment.

We can get around this by passing --mode production in the cmdline like below:

npm run webpack --mode development ...

As is mentioned on the webpack documentation, blog and everywhere else on the internet. How can we set the config in the config file? Simply putting a mode: development under modules won't work. Just a bit frustrated why the documentation is just missing...

Solution 1

I was looking to the same answer right now, for me it seems that adding the property to the config file do the job.

module.exports = {
  // ...
  mode: 'development'
};

Solution 2

Per the Webpack docs:

new webpack.DefinePlugin({
  'process.env.NODE_ENV': JSON.stringify('development'),
});

Even better: (you can pass in the variable via the command line or an npm script)

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