Ich habe eine einfache webpack.config.js
module.exports = {
entry: "./app.js",
output: {
filename: "bundle.js"
},
}
Und ich möchte die Werte für übergeben entryund output durch Kommandozeilenargumente. Ist das möglich und wie würde ich das machen?
webpack.config.js can exportiert auch eine Funktion von env, die ein conf-Objekt zurückgeben kann. Sie können daher eine Webpack-Konfiguration wie folgt haben:
module.exports = env => {
return {
entry: env === "production" ? "./app.js": "app-dev.js",
output: {
filename: "bundle.js"
},
}
};
und rufen Sie dann webpack von der Befehlszeile (oder package.json) wie folgt auf:
webpack --env=production
Das funktioniert nicht mit Webpack 1 richtig? weil es mir Fehler gibt, dass die Konfigurationsdatei kein Objekt zurückgibt
– Matias Fernández Martinez
10. September 2017 um 21:57 Uhr
@MatiasFernandezMartinez etwas spät, aber ja, das Exportieren einer Funktion wurde entweder in Webpack 3 oder 4 hinzugefügt
– Bauhaus
28. Januar 2019 um 17:53 Uhr
Ob dies der Fall ist, geht aus Ihrer Antwort nicht hervor env Argument magisch oder wir können beliebige Parameter übergeben, wie z --paramName1=value --paramName2=value
– Michail Bäcker
9. Januar 2020 um 20:27 Uhr
@MikhailBatcer Gute Frage. Es scheint, dass es –env(.XXX) sein muss. Sehen Umgebungsvariablen. Danke an Orkun Tuzel
– Mojtaba
2. Oktober 2020 um 7:50 Uhr
Es sollte sein: entry: !!env.production ? "./app.js": "app-dev.js"
– TechWeisheit
11. März um 1:49
Adrian
Sie können benutzerdefinierte Parameter bereitstellen, indem Sie Umgebungsvariablen in der Befehlszeile übergeben. Die Syntax dafür hat sich zwischen Version 4 und 5 von Webpack geändert. Für dieses Beispiel würden Sie Folgendes aufrufen:
Zum Webpaket 5:
webpack --env entry='./app.js' --env output="bundle.js"
Zum Webpaket 4:
webpack --env.entry='./app.js' --env.output="bundle.js"
Für beide Versionen können Sie dann auf die Umgebungsvariablen in Ihrer Webpack-Konfiguration zugreifen, indem Sie dies tun
module.exports = env => ({
entry: env.entry,
output: {
filename: env.output
},
});
Ob dies der Fall ist, geht aus Ihrer Antwort nicht hervor env Argument magisch oder wir können beliebige Parameter übergeben, wie z --paramName1=value --paramName2=value
– Michail Bäcker
9. Januar 2020 um 20:27 Uhr
DAS FUNKTIONIERT NICHT!! webpack –env.entry=’./app.js’ –env.output=’bundle.js’ RICHTIG IST webpack –env=mode=production –env=branch=develop
– madruga
12. Februar um 18:23 Uhr
@madruga Dies funktionierte für Webpack 4, das die neueste Version war, als diese Antwort geschrieben wurde. Die Syntax wurde jetzt für Webpack 5 geändert. Mehr Infos hier: webpack.js.org/guides/environment-variables. Ich habe jetzt meine Antwort aktualisiert, um dies widerzuspiegeln.
– Adrian
15. Februar um 16:10 Uhr
Pastete
Sie können auch mehrere Schlüssel-Wert-Paare an Ihre Konfiguration übergeben --env=key=value:
webpack --env=mode=production --env=branch=develop
oder (für Entwicklung mit webpack-dev-server):
webpack serve --env=mode=production --env=branch=develop
webpack.config.js würde so aussehen:
module.exports = (env) => {
const mode = env.mode === 'prod' ? 'dev';
const branch = env.branch ? env.branch : 'develop';
return {
entry: mode === 'prod' ? './app.js': 'app-dev.js',
output: {
filename: 'bundle.js',
path: 'dist/' + branch),
},
}
}
Alle auf diese Weise übergebenen Werte sind als Objekt in der Konfiguration verfügbar, was ihre Verwendung vereinfacht.
{
WEBPACK_BUNDLE: true,
mode: 'production',
branch: 'feature-x',
foo: 'bar'
}
Du kannst den … benutzen --env CLI-Argument, um beliebige Parameter an die config.
Beispielsweise der folgende Befehl:
webpack --env entry=./entry.js --env output=./output.js
Erzeugt das folgende env-Objekt:
{entry: './entry.js', output: './output.js'}
Was Sie dann in Ihrer Konfiguration wie folgt verwenden können:
module.exports = env => ({
entry: env.entry,
output: {
filename: env.output
},
});
Lesen Sie hier mehr: Webpack – Umgebungsvariablen
Sie dürfen verwenden argv paketieren und die Variablen setzen. Sie müssen es vorher tun module.export.
Danke, das werde ich auf jeden Fall versuchen. Aber gibt es keinen einfacheren Weg, ohne dass eine zusätzliche Paketreferenz erforderlich ist? Schließlich ist webpack.config.js nur Javascript-Code.
– Oblomow
22. Mai 2017 um 12:55 Uhr
Sie können –env=test beispielsweise über die Befehlszeile übergeben und dann eine Funktion von env exportieren, die ein statt direkt ein Objekt zurückgibt webpack.js.org/configuration/configuration-types/…
– Axnyff
22. Mai 2017 um 12:58 Uhr
Danke @Axnyff: Der Env-Trick scheint für mich zu funktionieren. Wenn Sie es zu einer vollständigen Antwort machen, kann ich es akzeptieren.
– Oblomow
22. Mai 2017 um 13:14 Uhr
Ich habe es gerade getan, ist das noch ok für dich?
– Axnyff
22. Mai 2017 um 13:24 Uhr
Patrice Thimothee
Der einfachste Weg, meiner Meinung nach, Argumente zu übergeben, ist die Verwendung von Node. Webpack ist derjenige, der die Argumente erhält, Sie können Speichern Sie Ihre Befehlszeilenargumente in einer dedizierten Umgebungsvariablen (die nur innerhalb der Session existiert):
// webpack.config.js
process.env.MY_APPLICATION_NAME_ARGS = JSON.stringify(process.argv)
export default {
...
Dann in Ihrer main.js (überall dort, wo Sie sie analysieren möchten), you Rufen Sie Ihre Befehlszeilenargumente aus Ihrer dedizierten Umgebungsvariable ab.
// main.js
const myArgs = JSON.parse(env.MY_APPLICATION_NAME_ARGS )
Da Sie alle Argumente abrufen, die Sie an Webpack übergeben haben, können Sie alle Knotenmodule (wie zum Beispiel yargs) problemlos verwenden, um sie zu analysieren (oder natürlich manuell).
So können Sie Dinge wie diese ohne Probleme tun:
webpack ... --opt1 the_value --custom1 something
yarn run dev --opt1 the_value --custom1 something
usw.
Danke, das werde ich auf jeden Fall versuchen. Aber gibt es keinen einfacheren Weg, ohne dass eine zusätzliche Paketreferenz erforderlich ist? Schließlich ist webpack.config.js nur Javascript-Code.
– Oblomow
22. Mai 2017 um 12:55 Uhr
Sie können –env=test beispielsweise über die Befehlszeile übergeben und dann eine Funktion von env exportieren, die ein statt direkt ein Objekt zurückgibt webpack.js.org/configuration/configuration-types/…
– Axnyff
22. Mai 2017 um 12:58 Uhr
Danke @Axnyff: Der Env-Trick scheint für mich zu funktionieren. Wenn Sie es zu einer vollständigen Antwort machen, kann ich es akzeptieren.
– Oblomow
22. Mai 2017 um 13:14 Uhr
Ich habe es gerade getan, ist das noch ok für dich?
– Axnyff
22. Mai 2017 um 13:24 Uhr
Hast du es mal mit versucht Umgebungsvariablen ?
– Orkun Tuzel
22. Mai 2017 um 12:58 Uhr