命令行中的Webpack开发服务器自定义参数 [英] Webpack dev server custom parameters from command line

问题描述

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

I want to pass custom parameters from command line. Something like this:

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

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

Exactly what I am trying to achieve is that I am working on a vue-loader application. The application has certain services that fetch data.

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

I have another application that acts as the api server. We need the application to run in 2 ways (because all members of our team don't have access to the api server)

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

So that service has 2 ways to get data:

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

1) If api server is running(for dev team), use http calls to get the data from localhost

2）如果api服务器未运行（针对设计团队），只需使用服务中已有的静态数据即可。

2) If api server is not running(for design team), simply use static data already there in services:

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命令行并按照此文档进行传递，没有找到我的方法（我错过了什么吗？）

So this customparam1 is supposed to be passed from webpack-dev-server command line and as per this documentation, no such way exists that I could find(did I miss something?)

我该怎么做？

PS：我正在使用webpack 1.12.1

PS: I am on webpack 1.12.1

推荐答案

更新：2020年2月16日

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

If you are using webpack4 or the latest one, using the environment variables is very handy!

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

The webpack command line environment option --env allows you to pass in as many environment variables as you like. Environment variables will be made accessible in your webpack.config.js. For example, --env.production or --env.NODE_ENV=local (NODE_ENV is conventionally used to define the environment type, see here.)

例如，命令类似于：

env.NODE_ENV = development webpack-dev-server

在webpack.config.js中，我们可以在 new webpack.DefinePlugin（）内定义env变量使其在应用程序中可用。

Inside the webpack.config.js, we can define the env variable inside new webpack.DefinePlugin() to make it available in the app.

webpack.config.js :(插件）

webpack.config.js:(plugin)

// 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。 create-react-app

检查react-create-app 文档，该变量将以 REACT_APP _

命令：
REACT_APP_CUSTOM_VARIABLE = 234 npm run dev

app：

console.log（process.env.REACT_APP_CUSTOM_VARIABLE）// 234

命令：

webpack-dev-server  --customparam1=value

webpack.config.js：

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){ ... }

这篇关于命令行中的Webpack开发服务器自定义参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！