Webpack dev服务器从命令行自定义参数

Question

我想从命令行传递自定义参数。像这样的东西：

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

我正在努力实现的是我正在开发一个vue-loader应用程序。该应用程序具有某些获取数据的服务。

我有另一个充当api服务器的应用程序。我们需要以两种方式运行应用程序（因为我们团队的所有成员都无法访问api服务器）

因此该服务有两种获取数据的方式：

1）如果api服务器正在运行（对于开发团队），请使用http调用从localhost获取数据

2）如果api服务器没有运行（对于设计团队），只需使用服务中已存在的静态数据：

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

所以这个customparam1应该从webpack-dev-server命令行传递，并且根据this文档，我找不到这样的方法（我错过了什么？）

我该怎么做？

PS：我在webpack 1.12.1上

Answer 1

你可以使用--define选项，它以var=value为参数。 Webpack将简单地用值替换所有出现的事件。例如，使用以下代码：

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

当你运行：

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

它会导致：

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

您还需要使用--define ENABLE_API=false运行它，否则会抛出ENABLE_API未定义的错误。因为它是一个简单的文本替换，你传递的值将按原样插入，所以如果你想要一个字符串，你必须使用'"value"'（注释引号内），否则它被解释为常规JavaScript，但我无法得到从命令行工作的字符串。

您可以通过使用webpack.DefinePlugin实现完全相同（我链接了webpack 2文档，但它在webpack 1中的工作方式相同）。有了它，您可以拥有更复杂的替换，并且还可以使用JSON.stringify等实用程序来创建字符串版本。例如，为了克服从命令行传递字符串的问题，您可以使用：

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

并运行环境变量API_TYPE设置为withApi：

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

并且每个API_TYPE将被替换为字符串'withApi'，如果您根本没有指定它，它将是未定义的。

Answer 2

我不太确定，但通常我这样做是为了分离环境：

命令：

NODE_ENV=development webpack-dev-server

webpack.config.js（插件）：

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

主要的js文件：

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

---

我不认为webpack-dev-server能够解析自定义参数，但你可以尝试这样的事情：

命令：

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) 
        })
    ]
};

主要的js文件：

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

Answer 3

无论如何，webpack-dev-server中不允许传递自定义参数。

但是我们可以使用一些现有的参数，比如--env --define --open来传递我们自己的值。

写吧：

webpack-dev-server --env=someparams

那么你可以使用yargs来读取你的参数。

完成了！

Answer 4

webpack-dev-server --customparam1=value不起作用，webpack-dev-server只允许众所周知的论点。

但是，如果将环境参数（而不是环境变量）作为函数返回，则可以将其传递到webpack配置中。

命令行参数--env.param=value，如：

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

将在webpack.config.js提供如下：

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

这些参数显然可以使用webpack.DefinePlugin传递到app中，如上面@ AppleJam的回答所述。