Get current `--mode` in webpack.config.js

Question

How can I get the current --mode specified in package.json inside webpack.config.js? (For instance, for pushing some plugins.)

package.json

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

What I did in Webpack 3:

package.json

"scripts": {
    "build": "cross-env NODE_ENV=development webpack",
    "prod": "cross-env NODE_ENV=production webpack"
  },

Then, I was able to get environment in Webpack with process.env.NODE_ENV.

Of course, I can pass NODE_ENV with --mode but I prefer to avoid duplication.

same question as you asked. – Monochrome Yeh Mar 15 '18 at 03:52 — Monochrome Yeh, Mar 15 '18 at 03:52

Fernando Espinosa · Accepted Answer · 2022-01-22T06:43:47.453

93

You want to avoid duplication of options passed on the script.

When you export a function, the function will be invoked with 2 arguments: an environment env as the first parameter and an options map argv as the second parameter.

package.json

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

webpack.config.js

module.exports = (env, argv) => {
    console.log(`This is the Webpack 4 'mode': ${argv.mode}`);
    return {
        ...
    };
}

These are the results:

For npm run build-dev:

> webpack --mode development

This is the Webpack 4 'mode': development
Hash: 554dd20dff08600ad09b
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:27:35

For npm run build-prod:

> webpack --mode production

This is the Webpack 4 'mode': production
Hash: 8cc6c4e6b736eaa4183e
Version: webpack 4.1.1
Time: 42ms
Built at: 2018-3-14 11:28:32

edited Jan 22 '22 at 06:43

answered Mar 14 '18 at 15:29

Fernando Espinosa

4,625
1
30
37

1

This works, however, when I have to use `import/resolver` with eslint, it doesn't appear to accept a function. – corvid Apr 19 '18 at 13:23
for me, it worked by using "env.mode". the first parameter, and not the second. – Vinicius Rocha Aug 03 '18 at 22:19
@corvid Please check my answer, may be help you with the webpack resolver. – Daniel De León Feb 01 '19 at 15:57
4

On Webpack's official documentation they use `argv.mode` to get the actual mode : https://webpack.js.org/concepts/mode/ – Puka Feb 11 '19 at 18:54
I up voted your answer because i was setting it with an equal `mode=production` instead of a space.... thanks – Tarek Feb 21 '21 at 14:29

score 15 · Answer 2 · answered Feb 01 '19 at 15:55

15

To test if is in production mode, inside webpack.config.js file I use this:

const isProduction = process.argv[process.argv.indexOf('--mode') + 1] === 'production';

const config = {
    ...
};

if (isProduction) {
    config.plugins.push(new MiniCssExtractPlugin());
} else { // isDev
    config.devtool = /*'source-map'*/  'inline-source-map';
}

module.exports = config;

Stop trying NODE_ENV, is old school ( webpack 3 ).

And this is more compatible to work with import / webpack resolver

answered Feb 01 '19 at 15:55

Daniel De León

13,196
5
87
72

1

It is disappointing that this is how Webpack expects us to get the mode. This is not at all clean. – Adam Leggett Jan 11 '22 at 22:18
You right... for things like that I leave it behind. – Daniel De León Mar 12 '22 at 16:03

Macuvex · Answer 3 · 2018-03-14T15:08:20.240

Try this one

package.json

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

so if you are using the env inside webpack config, that looks something like this

module.exports = env => {
     const inProduction = env.production
     return  {
        entry: {...},
        output: {...},
        module: {...}
     }
}

more details to set up your webpack.config.js. (Environment Variables for webpack 4)

score 1 · Answer 4 · answered Aug 20 '18 at 11:29

1

I ended up (ab)using npm_lifecycle_script to set the mode in the DefinePlugin:

MODE: JSON.stringify(process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length, process.env.npm_lifecycle_script.substr(process.env.npm_lifecycle_script.indexOf('--mode ') + '--mode '.length).search(/($|\s)/)))

This takes the value of the --mode parameter from the issued webpack command.

answered Aug 20 '18 at 11:29

BillyNate

908
5
10

Yes, I also use `process.env.npm_lifecycle_script` to define `--production`, `--development` and `--watch` in the webpack command in npm to add different things to webpack configuration depending on it (babel loader only for production and browser sync plugin only for the start script with watch), but I really don't know whether it's a good practice. – Roman Karagodin Apr 17 '22 at 09:28

Get current `--mode` in webpack.config.js

4 Answers4