Parametry niestandardowe serwera dewelopera Webpack z wiersza poleceń

Question

Chcę przekazać niestandardowe parametry z wiersza poleceń. Coś takiego:

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

Dokładnie to, co staram się osiągnąć to, że pracuję nad aplikacji vue-ładowarki. Aplikacja ma określone usługi, które pobierają dane.

Mam inną aplikację, która działa jako serwer api. Musimy uruchomić aplikację na 2 sposoby (bo wszyscy członkowie naszego zespołu nie ma dostępu do serwera API)

Tak, że usługa ma 2 sposoby, aby uzyskać dane:

1) Jeśli serwer API biegania (dla zespołu dev), użyj http wzywa, aby uzyskać dane z localhost

2) Jeśli serwer api nie jest uruchomiony (dla zespołu projektowego), po prostu korzystać z danych statycznych już istnieje w usługach:

var someData; 
if (customparam1 === "withApi"){ 
    someData=getData("http://localhost:8081/apiendpoint"); 
} else { 
    someData=[ 
     {a:b}, 
     {c:d}, 
     // more custom array of static data 
     ..... 
    ] 
} 

Tak więc ten customparam1 powinien zostać przekazany z linii poleceń webpack-dev-server i jak na dokumentację this, nie istnieje taki sposób, który mógłbym znaleźć (czy coś przegapiłem?)

Jak to zrobić?

PS: Jestem na WebPacka 1.12.1

Answer 1

Można użyć opcji --define, który odbywa var=value jako argument. Webpack po prostu zastąpi wszystkie wystąpienia wartością. Na przykład z następującego kodu:

if (ENABLE_API) { 
    // Use api 
} else { 
    // Use static data 
} 

Po uruchomieniu:

webpack-dev-server --inline --hot --define ENABLE_API 

spowoduje to:

if (true) { 
    // Use api 
} else { 
    // Use static data 
} 

będzie też trzeba uruchomić go z --define ENABLE_API=false, inaczej to będzie zgłaszać błąd, który nie został zdefiniowany jako ENABLE_API. Ponieważ jest to zwykły zamiennik tekstu, wartość, którą przekazujesz, zostanie wstawiona bez zmian, więc jeśli chcesz ciąg znaków, musisz użyć '"value"' (notować cudzysłów w cudzysłowach), inaczej jest interpretowany jako zwykły JavaScript, ale nie mogłem uzyskać ciąg do pracy z wiersza poleceń.

Możesz osiągnąć dokładnie to samo, używając webpack.DefinePlugin (dołączyłem dokumenty Webpack 2, ale działa to samo w pakiecie internetowym 1). Dzięki temu możesz mieć bardziej złożone zamienniki, a także możesz używać narzędzi takich jak JSON.stringify do tworzenia wersji ciągów. Na przykład, aby przezwyciężyć problem z przechodzącą ciąg z linii poleceń, można użyć:

new webpack.DefinePlugin({ 
    API_TYPE: JSON.stringify(process.env.API_TYPE) 
}) 

i biegać z otoczenia zmiennej API_TYPE zestaw do withApi:

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

i każdy API_TYPE zostanie zastąpiony z ciągiem 'withApi', jeśli nie określisz go w ogóle, po prostu będzie niezdefiniowany.

Answer 2

Nie jestem pewien, ale zazwyczaj robię to na oddzielnym środowisku:

polecenia:

NODE_ENV=development webpack-dev-server 

webpack.config.js (plugin):

... 
plugins:[ 
    new webpack.DefinePlugin({ 
    'process.env': { 
     NODE_ENV: JSON.stringify('production') 
    } 
    }) 
] 
... 

głównej Plik js:

if(process.env.NODE_ENV !== 'production') { ... } 

---

Nie sądzę WebPack-dev-serwer jest zdolny do analizowania parametrów niestandardowych, ale można spróbować czegoś takiego:

polecenie:

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) 
     }) 
    ] 
}; 

główny plik js:

if(customparam1 === xxx){ ... }