webentwicklung-frage-antwort-db.com.de

Benutzerdefinierte Webpack Dev Server-Parameter über die Befehlszeile

Ich möchte benutzerdefinierte Parameter über die Befehlszeile übergeben. Etwas wie das:

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

Genau das, was ich erreichen möchte, ist, dass ich an einer Vue-Loader-Anwendung arbeite. Die Anwendung verfügt über bestimmte Dienste, die Daten abrufen.

Ich habe eine andere Anwendung, die als API-Server fungiert. Die Anwendung muss auf zwei Arten ausgeführt werden (da alle Mitglieder unseres Teams keinen Zugriff auf den API-Server haben)

Dieser Dienst hat also zwei Möglichkeiten, Daten abzurufen:

1) Wenn der API-Server ausgeführt wird (für das Entwicklerteam), verwenden Sie http-Aufrufe, um die Daten von localhost abzurufen

2) Wenn der API-Server nicht ausgeführt wird (für das Designteam), verwenden Sie einfach statische Daten, die bereits in den Diensten vorhanden sind:

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

Dieses customparam1 soll also von der Kommandozeile von webpack-dev-server übergeben werden und laut this documentation gibt es keinen Weg, den ich finden könnte (habe ich etwas verpasst?)

Wie mache ich es?

PS: Ich bin auf Webpack 1.12.1

8
rahulserver

Ich bin mir nicht so sicher, aber normalerweise mache ich das, um die Umgebung zu trennen:

befehl:

NODE_ENV=development webpack-dev-server

webpack.config.js (Plugin):

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

haupt-JS-Datei:

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

Ich glaube nicht, dass webpack-dev-server benutzerdefinierte Parameter analysieren kann, aber Sie können Folgendes versuchen:

befehl:

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

haupt-JS-Datei:

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

Sie können die Option --define verwenden, für die var=value als Argument verwendet wird. Webpack ersetzt einfach alle Vorkommen durch den Wert. Zum Beispiel mit folgendem Code:

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

Wenn du rennst:

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

es wird ergeben:

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

Sie müssten es auch mit --define ENABLE_API=false ausführen, andernfalls wird eine Fehlermeldung ausgegeben, dass ENABLE_API nicht definiert ist. Da es sich um eine einfache Textersetzung handelt, wird der übergebene Wert so eingefügt, wie er ist. Wenn Sie also eine Zeichenfolge möchten, müssen Sie '"value"' (Anführungszeichen in Anführungszeichen) verwenden, da er sonst als reguläres JavaScript interpretiert wird eine Zeichenfolge, die von der Befehlszeile aus verwendet werden soll.

Sie können genau dasselbe erreichen, indem Sie webpack.DefinePlugin verwenden (ich habe die Dokumente zu Webpack 2 verlinkt, aber es funktioniert genauso in Webpack 1). Damit können Sie komplexere Ersetzungen vornehmen und Dienstprogramme wie JSON.stringify verwenden, um eine Zeichenfolgenversion zu erstellen. Um beispielsweise das Problem der Übergabe einer Zeichenfolge über die Befehlszeile zu lösen, können Sie Folgendes verwenden:

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

Führen Sie den Befehl mit der Umgebungsvariablen API_TYPE aus, die auf withApi festgelegt ist:

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

und jeder API_TYPE wird durch den String 'withApi' ersetzt, wenn Sie ihn überhaupt nicht angeben, ist er nur undefiniert.

5
Michael Jungo

webpack-dev-server --customparam1=value funktioniert nicht, nur bekannte Argumente werden von webpack-dev-server zugelassen.

Es ist jedoch möglich, Umgebungsparameter (keine Umgebungsvariablen) an eine Webpack-Konfiguration zu übergeben, wenn diese als Funktion zurückgegeben wird.

Ein Befehlszeilenparameter --env.param=value wie in:

webpack-dev-server --env.param=value

wird im webpack.config.js wie folgt verfügbar sein:

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: [
      // ...
    ] 
    // ...
  }
}

Solche Parameter können natürlich mit webpack.DefinePlugin an die App übergeben werden, wie oben in der Antwort von @ AppleJam beschrieben.

0

Im webpack.config.js, wenn Sie Konfiguration als Funktion exportieren (anstelle eines Objekts), können Sie leicht auf die bereitgestellten Optionen zugreifen:

module.exports = (env, argv) => {
    const customparam1 = argv.customparam1;
    // ...
}

Webpack-Dokumente :

Die Funktion wird mit zwei Argumenten aufgerufen:

  • umgebung [...]
  • Eine Optionszuordnung ( argv ) [...] (die die an das Webpack übergebenen Optionen beschreibt)

Hinweis :

Wenn Sie folgendes angeben:

webpack-dev-server --customparam1=true --customparam2=42

typeof argv.customparam1  // string
typeof argv.customparam2  // number
0
ellockie

die Übergabe benutzerdefinierter Parameter ist im webpack-dev-server jedoch nicht zulässig.

wir können jedoch einige vorhandene Parameter wie --env --define --open verwenden, um unsere eigenen Werte zu übergeben.

einfach schreiben:

webpack-dev-server --env=someparams

dann können Sie die yargs verwenden, um Ihre Parameter zu lesen.

erledigt!

0
Cai Wenlie