Passing command line arguments to webpack.config.js
JavascriptWebpackJavascript Problem Overview
I have a simple webpack.config.js
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
}
And I want to pass the values for entry
and output
through command line arguments. Is that possible and how would I do that?
Javascript Solutions
Solution 1 - Javascript
webpack.config.js
can also exports a function of env which can return a conf object. You can therefore have a webpack config like:
module.exports = env => {
return {
entry: env === "production" ? "./app.js": "app-dev.js",
output: {
filename: "bundle.js"
},
}
};
and then call webpack from command-line (or package.json) like this:
webpack --env=production
Solution 2 - Javascript
You can provide custom parameters by passing environment variables on the command line. The syntax for this has changed between version 4 and 5 of Webpack. For this example, you would call:
For Webpack 5:
webpack --env entry='./app.js' --env output='bundle.js'
For Webpack 4:
webpack --env.entry='./app.js' --env.output='bundle.js'
For both versions, you can then access the environment variables in your Webpack config by doing
module.exports = env => ({
entry: env.entry,
output: {
filename: env.output
},
});
Solution 3 - Javascript
You can also pass multiple key-value pairs to you config using --env=key=value
:
webpack --env=mode=production --env=branch=develop
or (for development with webpack-dev-server):
webpack serve --env=mode=production --env=branch=develop
webpack.config.js
would look like this:
module.exports = (env) => {
const mode = env.mode === 'prod' ? 'dev';
const branch = env.branch ? env.branch : 'develop';
return {
entry: mode === 'prod' ? './app.js': 'app-dev.js',
output: {
filename: 'bundle.js',
path: 'dist/' + branch),
},
}
}
All values passed this way are available as an object in the config which makes it easy to use them.
{
WEBPACK_BUNDLE: true,
mode: 'production',
branch: 'feature-x',
foo: 'bar'
}
Solution 4 - Javascript
You can use the --env
CLI argument to pass arbitrary parameters to the config.
For example, the following command:
webpack --env entry=./entry.js --env output=./output.js
Will produce the following env object:
{entry: './entry.js', output: './output.js'}
Which you can then use in your config like so:
module.exports = env => ({
entry: env.entry,
output: {
filename: env.output
},
});
Read more here: Webpack - Environment Variables
Solution 5 - Javascript
You may use argv package and set the variables. You must do it before module.export
.
Solution 6 - Javascript
The easiest way, in my opinion, to pass arguments is to use Node. Webpack being the one receiving the arguments, you can save your command line arguments in a dedicated environment variable (which exists only within the session):
// webpack.config.js
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)
export default {
...
Then in your main.js (anywhere where you want to parse them), you retrieve your command line arguments from your dedicated environment variable.
// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )
As you'll be retrieving all of the arguments you passed to Webpack, using this, you'll be able to use any node modules (like yargs for instance) painlessly to parse them (or do it manually of course).
So you'll be able to do things like these without any issues:
webpack ... --opt1 the_value --custom1 something
yarn run dev --opt1 the_value --custom1 something
etc.