19

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

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

4

5 回答 5

10

更新：2020 / 2 / 16

1. 网络包^4

如果您使用的是 webpack4 或最新版本，使用环境变量非常方便！

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

例如，命令如下：

env.NODE_ENV=development webpack-dev-server

在 webpack.config.js 中，我们可以在里面定义 env 变量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){ ... }
于 2017-03-16T19:11:34.210 回答
6

在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
于 2019-10-09T09:53:56.640 回答
5

您可以使用作为参数的--define选项。var=valueWebpack 将简单地将所有出现的地方替换为该值。例如使用以下代码：

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

并且 everyAPI_TYPE将被替换为 string 'withApi'，如果您根本不指定它，它将只是未定义的。

于 2017-03-16T18:20:04.760 回答
2

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 的回答中概述的方法传递到应用程序中。

于 2018-09-05T12:30:04.310 回答
0

anyway, passing custom parameters is not allowed in webpack-dev-server.

but we can use some existed parameters, like --env --define --open, to pass our own values.

just write:

webpack-dev-server --env=someparams

then you can use the yargs to read your parameters.

done!

于 2018-04-19T12:47:51.567 回答