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将这些参数传递到应用程序中，如上文@AppleJam的答案所述。

Answer 5

在webpack.config.js中，如果您export configuration as a function（而不是对象），则可以轻松访问提供的选项：

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

webpack docs：

该函数将通过两个参数调用：


环境[...]

选项映射（ argv ）[...]（描述了传递给webpack的选项）

注意：

如果您提供：

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

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

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

5 个答案: