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命令行传递,根据这个文档,我找不到这样的方法(我错过了什么？)

我该怎么做？

PS:我在webpack 1.12.1上

Answer 1

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

命令:

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 2

您可以使用--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 3

在 中webpack.config.js，如果您将配置导出为函数（而不是对象），您可以轻松访问提供的选项：

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

webpack 文档：

该函数将使用两个参数调用：

• 环境 [...]
• 选项映射 ( argv ) [...] (其中) 描述了传递给 webpack 的选项

注意：

如果您提供：

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

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