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

我想从命令行传递自定义参数。这样的事情：来自命令行的Webpack dev服务器自定义参数

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

正是我想要实现的是，我正在工作的VUE加载程序的应用程序。该应用程序具有某些提取数据的服务。

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

使服务有2种方式来获得数据：

1）如果API服务器运行（开发团队），使用HTTP调用如果API服务器未运行（设计团队从本地主机

2）获得的数据），只需使用静态数据已经存在的服务：

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

来源

2017-03-16 rahulserver

可以使用--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) 
})

，与环境变量设置为withApi运行：

API_TYPE=withApi webpack-dev-server --inline --hot

，每将被替换与字符串'withApi'，如果你没有指定它，它将只是未定义。

来源

2017-03-16 18:20:04

这真的有用！感谢你的回答。我发现的唯一问题是，如果我重新启动webpack服务器，我不得不关闭浏览器并重新启动本地应用程序的url，否则会出现404错误。你也面临同样的问题吗？ – rahulserver

我在firefox上验证了这一点。但在铬甚至重新启动浏览器不起作用，我一直在404 – rahulserver

我不是很确定，但通常我这样做是为了独立的环境：

命令：

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-服务器能够解析自定义参数，但你可以尝试这样的事：

命令：

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-16 19:11:34 AppleJam

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

回答

相关问题