Webpack dev server user options from the command line

Question

I want to pass user parameters from the command line. Something like that:

webpack-dev-server --inline --hot --customparam1=value 

Exactly what I'm trying to achieve is that I am working on a vue-loader application. An application has certain services that retrieve data.

I have another application that acts as an api server. We need the application to be executed in two ways (since all members of our team do not have access to the api server)

Thus, a service has two ways to retrieve data:

1) If the api server is running (for the development team), use http calls to get data from localhost

2) If the api server is not running (for the development team), just use the static data there already in the services:

 var someData; if (customparam1 === "withApi"){ someData=getData("http://localhost:8081/apiendpoint"); } else { someData=[ {a:b}, {c:d}, // more custom array of static data ..... ] } 

So this customparam1 should be passed from the webpack-dev-server command line and according to this documentation, this way does not exist, what can I find (did I miss something?)

How can I do it?

PS: I am in webpack 1.12.1

Answer 1

I'm not sure, but usually I do this to separate the environment:

Command:

 NODE_ENV=development webpack-dev-server 

webpack.config.js (plugin):

 ... plugins:[ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }) ] ... 

main js file:

 if(process.env.NODE_ENV !== 'production') { ... } 

---

I don't think the webpack-dev server is capable of parsing user parameters, but you can try something like this:

Command:

 webpack-dev-server --customparam1=value 

webpack.config.js:

 var path = require("path"); var webpack = require("webpack"); function findPara(param){ let result = ''; process.argv.forEach((argv)=>{ if(argv.indexOf('--' + param) === -1) return; result = argv.split('=')[1]; }); return result; } const customparam1 = findPara('customparam1'); module.exports = { ... plugins: [ new webpack.DefinePlugin({ customparam1:JSON.stringify(customparam1) }) ] }; 

main js file:

 if(customparam1 === xxx){ ... } 

Answer 2

You can use the --define option, which takes var=value as an argument. Webpack will simply replace all occurrences with a value. For example, using the following code:

 if (ENABLE_API) { // Use api } else { // Use static data } 

When you run:

 webpack-dev-server --inline --hot --define ENABLE_API 

this will lead to:

 if (true) { // Use api } else { // Use static data } 

You also need to run it with --define ENABLE_API=false , otherwise it will ENABLE_API error that ENABLE_API is undefined. Since this is a simple text replacement, the value you pass will be inserted as is, so if you want to get the string, you will need to use '"value"' (note the quotes inside the quotes), otherwise it will be interpreted as normal JavaScript, but I could not get the line to work from the command line.

You can achieve the same by using webpack.DefinePlugin (I linked the webpack 2 document, but it works the same in webpack 1). In doing so, you can perform more complex replacements, as well as use utilities such as JSON.stringify to create a string version. For example, to overcome the problem of passing a string from the command line, you can use:

 new webpack.DefinePlugin({ API_TYPE: JSON.stringify(process.env.API_TYPE) }) 

And start with the environment variable API_TYPE set to withApi :

 API_TYPE=withApi webpack-dev-server --inline --hot 

and each API_TYPE will be replaced with the string 'withApi' , if you don't specify it at all, it will just be undefined.

Answer 3

In any case, passing user parameters to webpack-dev-server is not allowed.

but we can use some existing options, such as --env --define --open, to pass our own values.

just write:

 webpack-dev-server --env=someparams 

Then you can use Yargi to read your options.

made!

Answer 4

webpack-dev-server --customparam1=value does not work, webpack-dev-server only well-known arguments are allowed.

However, you can pass environment parameters (not environment variables) to the web package configuration if it returns as a function.

Command line --env.param=value , for example:

 webpack-dev-server --env.param=value 

will be available in webpack.config.js as follows:

 module.exports = env => { console.log(env.param) return { // normal webpack config goes here, as eg entry: __dirname + "/src/app/index.js", output: { // ... }, module: { // ... }, plugins: [ // ... ] // ... } } 

Such parameters can obviously be passed to the application using webpack.DefinePlugin , as described above in @AppleJam's answer.

Answer 5

In webpack.config.js , if you export the configuration as a function (instead of an object), you can easily access the provided parameters:

 module.exports = (env, argv) => { const customparam1 = argv.customparam1; // ... } 

Web Package Docs :

The function will be called with two arguments:

• Environment [...]
• The parameter map ( argv ) [...] (which) describes the parameters passed to the web package

Note :

If you provide:

webpack-dev-server --customparam1=true --customparam2=42

 typeof argv.customparam1 // string typeof argv.customparam2 // number