Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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...

like image 200
hk1ll3r Avatar asked Mar 12 '18 19:03

hk1ll3r


People also ask

How do you set mode to development or production?

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.

What is difference between production and development mode in webpack?

Webpack generates the bundle in different ways based on the mode type. In development mode, the bundle will be more verbose with comments. In production mode, Webpack does everything to use the bundle for production. It includes minification of the bundle file and other optimizations.

What is mode in webpack?

Providing the mode configuration option tells webpack to use its built-in optimizations accordingly.

Is webpack used in production?

Webpack v4+ will minify your code by default in production mode . Note that while the TerserPlugin is a great place to start for minification and being used by default, there are other options out there: ClosureWebpackPlugin.


2 Answers

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' }; 
like image 127
Burrich Avatar answered Sep 17 '22 01:09

Burrich


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),   }, }), 
like image 36
omarjmh Avatar answered Sep 19 '22 01:09

omarjmh