2

I am upgrading webpack 4 to 5. In package.json I had:

start": "webpack-dev-server --config config/webpack.js --mode development --cssExtract --uiTest --progress --color --port 2000 --open"

after an upgrade I got:

[webpack-cli] Error: Unknown option '--cssExtract'

--cssExtract is custom flag. I use it in the config file:

    cssExtract
      ? new MiniCssExtractPlugin({
          filename: '[contenthash].css',
        })
      : false,
Edgaras Karka
  • 7,400
  • 15
  • 61
  • 115
  • Just out of curiosity, why do you need an additional variable, you set mode development, the second thing is `webpack-dev-server` does not start like this anymore. Take a look at the [dev-server](https://webpack.js.org/configuration/dev-server/) documentation `webpack serve` this is the correct call. `--mode=development` `module.exports = (env, argv) => { if (argv.mode === 'development') { //... } if (argv.mode === 'production') { //... } return config; };` – Grzegorz T. Feb 22 '21 at 14:25
  • This has already been asked and answered here: [How to pass arguments to webpack.conf.js?](https://stackoverflow.com/questions/42782804/how-to-pass-arguments-to-webpack-conf-js) – Slbox May 26 '22 at 22:04

1 Answers1

2

Alternative in webpack 5 is to use env vars https://webpack.js.org/guides/environment-variables/

webpack 4

package.json

{
  "scripts": {
    "build": "npm-run-all --serial build-light build-dark",
    "build-light": "webpack --color-mode light",
    "build-dark": "webpack --color-mode dark"
  }
}

webpack.config.js

module.exports = (env, options) => {
  // console.log(options.colorMode)

webpack 5

package.json

{
  "scripts": {
    "build": "npm-run-all --serial build-light build-dark",
    "build-light": "webpack --env color-mode=light",
    "build-dark": "webpack --env color-mode=dark"
  }
}

webpack.config.js

module.exports = (env, options) => {
  // console.log(env['color-mode'])
mikep
  • 5,880
  • 2
  • 30
  • 37