來自命令行的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服務器自定義參數

回答

相關問題