来自命令行的 Webpack 开发服务器自定义参数

Question

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

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

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

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

所以该服务有两种获取数据的方式：

1) 如果 api server 正在运行（对于开发团队），使用 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

更新：2020 年 2 月 16 日

1。 webpack^4

如果你使用的是 webpack4 或最新的，使用environment variables 非常方便！

webpack 命令行环境选项 --env 允许你传入任意数量的环境变量。环境变量将可以在您的 webpack.config.js 中访问。例如，--env.production 或 --env.NODE_ENV=local（NODE_ENV 通常用于定义环境类型，请参见此处。）

例如命令如下：

env.NODE_ENV=development webpack-dev-server

在 webpack.config.js 中，我们可以在 new webpack.DefinePlugin() 中定义环境变量以使其在应用程序中可用。

webpack.config.js:(插件)

// pass the env and return the webpack setting
module.exports = env => {  
  console.log(env);

  return {
    ....
    plugins: [
      new HtmlWebpackPlugin({
        template: "./public/index.pug",
        inject: false
      }),
      new webpack.DefinePlugin({ customparam1: JSON.stringify(env.customparam1) })
    ],

        }
      ]
     ....
    }
  };
};

2。创建反应应用程序

检查react-create-app doc，变量将以REACT_APP_开头

命令： REACT_APP_CUSTOM_VARIABLE=234 npm run dev

应用程序：

console.log(process.env.REACT_APP_CUSTOM_VARIABLE) // 234

3。旧答案

命令：

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

在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

Answer 3

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: [
      // ...
    ] 
    // ...
  }
}

这些参数显然可以使用@AppleJam 的回答中所述的webpack.DefinePlugin 传递到应用程序中。

Answer 4

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

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

只写：

webpack-dev-server --env=someparams

然后您可以使用yargs 来读取您的参数。

完成！

Answer 5

您可以使用--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，但我不能t 从命令行获取字符串。

您可以使用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'，如果你根本不指定它，它就只是未定义的。