CODEWITHSUNDEEP
javascriptwebpack
alex
alex

Reputation: 7601

How to pass arguments to webpack.conf.js?

I'm following these instructions based on this project (the official Vue Webpack template).

This is what I did:

package.js:

"scripts": {
  "dev": "node build/dev-server.js",
  "dev-alt": "node build/dev-server.js && set arg=alt&&webpack"
},

webpack.base.config.js:

// npm run dev-alt in the terminal 
console.log('ARGS:', process.env.arg)

However ARGS: outputs undefined.

What the correct way to do this?

Upvotes: 7

Views: 15083

Answers (5)

Slbox
Slbox

Reputation: 13108

With Webpack 5.x and above you can no longer pass custom arguments to Webpack like --myarg=val. But you can still pass the supported arguments like --mode=production.

So what's the solution for custom args? Instead we need to write it like this, using the new --env parameter.

  "build-project": webpack --mode=production --env myarg=val --env otherarg=val

Note that the custom arguments no longer start with -- after we put --env ahead of them. You'll need to put --env ahead of each custom key/value pair you need to define.

You'll also need to modify your Webpack config to export a function, rather than an object.

See this example code, taken from the docs.

const path = require('path');

module.exports = (env) => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
  console.log('Production: ', env.production); // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };
};

Upvotes: 27

GorvGoyl
GorvGoyl

Reputation: 49220

Pass webpack arguments with --key=value in package.json

"scripts": {
 "build": "webpack --mode=production --browser=firefox",
}

Access argv in webpack.config.js like this

module.exports = (env, argv) => {
  if (argv.mode == "development") {
  }

  if (argv.browser == "firefox") {
  }
};

Upvotes: 5

Imanali Mamadiev
Imanali Mamadiev

Reputation: 2654

You can try this:

const onlyJS = process.argv.some(argument => argument === 'your argument');

Upvotes: 1

tom10271
tom10271

Reputation: 4649

You can pass whatever arguments you want by:

node my-script.js --myArgs thisIsTheValue

In my-script.js you can retrieve arguments by:

function getArg(key, defaultVal) {
    var index = process.argv.indexOf(key),
        next = process.argv[index + 1];

    defaultVal = defaultVal || null;

    return (index < 0) ? defaultVal : (!next || next[0] === "-") ? true : next;
}

var theArgsIWant = getArg('--myArgs', 'this is the default if argument not found');

Upvotes: 3

Andre Pena
Andre Pena

Reputation: 59336

From the article you described:

"scripts": {
  "webpack-quizMaker": "set arg=quizMaker&&webpack",
  "webpack-quiz": "set arg=quiz&&webpack"
}

These scritps are doing 2 things:

  • They are setting an environment variable in a way that only works on Windows if you're not using PowerShell. It's recommend to use cross-env here.
  • They are running webpack after setting the envinronment variable.

Then, inside the webpack configuration, they are reading the environment variable:

if (process.env.arg == "quiz") {
    // do your thing
}

if (process.env.arg == "quizMaker") {
     // do your thing
};

I recommend that you install cross-env

npm install --save-dev cross-env

And replace the scripts with this:

"scripts": {
  "webpack-quizMaker": "cross-env arg=\"quizMaker\" webpack",
  "webpack-quiz": "set arg=\"quiz\" webpack"
}

No need for && anymore because cross-env will call the specified command (webpack) after setting the env variable.

Upvotes: 2

Related Questions