Ich habe einige Dinge für die Entwicklung - zB Mocks, mit denen ich meine verteilte Build-Datei nicht aufblähen möchte.
In RequireJS können Sie eine Konfiguration in einer Plugin-Datei übergeben und bedingen, dass darauf basierend Dinge erforderlich sind.
Für Webpack scheint es keine Möglichkeit zu geben, dies zu tun. Erstens, um eine Laufzeitkonfiguration für eine Umgebung zu erstellen, habe ich resolve.alias verwendet , um eine Anforderung abhängig von der Umgebung neu zu vergeben, z.
// All settings.
var all = {
fish: 'salmon'
};
// `envsettings` is an alias resolved at build time.
module.exports = Object.assign(all, require('envsettings'));
Dann kann ich beim Erstellen der Webpack-Konfiguration dynamisch zuweisen, auf welche Dateipunkte envsettings
(dh webpackConfig.resolve.alias.envsettings = './' + env
).
Ich möchte jedoch etwas tun wie:
if (settings.mock) {
// Short-circuit ajax calls.
// Require in all the mock modules.
}
Aber natürlich möchte ich diese Mock-Dateien nicht einbauen, wenn die Umgebung nicht Mock ist.
Ich könnte möglicherweise alle erforderlichen Anforderungen mithilfe von resolve.alias erneut manuell in eine Stub-Datei umwandeln - aber gibt es einen Weg, der sich weniger hackig anfühlt?
Irgendwelche Ideen, wie ich das machen kann? Vielen Dank.
quelle
Antworten:
Sie können das Define-Plugin verwenden .
Ich verwende es, indem ich etwas so Einfaches wie das in Ihrer Webpack-Build-Datei mache, wobei
env
der Pfad zu einer Datei ist, die ein Objekt mit Einstellungen exportiert:und dann das in deinem Code
Dieser Code wird aus Ihrer Build-Datei entfernt, wenn die Bedingung falsch ist. Hier sehen Sie ein funktionierendes Webpack-Build-Beispiel .
quelle
env
. Wenn man sich dieses Beispiel ansieht, scheint es, als würden sie diese Flagge über Schluck und Yargs handhaben, die nicht jeder benutzt."globals": { "ENV": true }
zu Ihrer .eslintrc hinzuIch bin mir nicht sicher, warum die Antwort "webpack.DefinePlugin" überall die beste ist, um umweltbasierte Importe / Anforderungen zu definieren.
Das Problem bei diesem Ansatz ist, dass Sie immer noch alle diese Module an den Client liefern -> überprüfen Sie dies beispielsweise mit dem Webpack-Bundle-Analyzer . Und die Größe von bundle.js überhaupt nicht reduzieren :)
Was also wirklich gut und viel logischer funktioniert, ist: NormalModuleReplacementPlugin
Anstatt eine on_client-Bedingung zu erfüllen, müssen Sie nicht benötigte Dateien in das Bundle aufnehmen
hoffentlich hilft das
quelle
Verwenden Sie
ifdef-loader
. In Ihren Quelldateien können Sie Dinge wie tunDie entsprechende
webpack
Konfiguration istquelle
Am Ende habe ich etwas Ähnliches wie Matt Derricks Antwort verwendet , war aber über zwei Punkte besorgt:
ENV
eingefügt (was für große Konfigurationen schlecht ist).require(env)
auf verschiedene Dateien verweisen.Was ich mir ausgedacht habe, ist ein einfacher Komponist, der ein Konfigurationsobjekt erstellt und in ein Konfigurationsmodul einfügt.
Hier ist die Dateistruktur, die ich dafür verwende:
Das
main.js
enthält alle Standard-Konfigurationsmaterialien:Das
dev.js
undproduction.js
einzige Konfigurationsmaterial, das die Hauptkonfiguration überschreibt:Der wichtige Teil ist der,
webpack.config.js
der die Konfiguration erstellt und mit dem DefinePlugin eine Umgebungsvariable generiert,__APP_CONFIG__
die das zusammengesetzte Konfigurationsobjekt enthält:Der letzte Schritt ist jetzt der
config.js
, es sieht so aus (Verwenden der ES6-Import-Export-Syntax hier, da es sich unter dem Webpack befindet):In Ihrem können
app.js
Sie jetztimport config from './config';
das Konfigurationsobjekt abrufen.quelle
Eine andere Möglichkeit besteht darin, eine JS-Datei als zu verwenden
proxy
und diese Datei das gewünschte Modul laden zu lassencommonjs
und es wie folgt zu exportierenes2015 module
:Dann können Sie das ES2015-Modul normalerweise in Ihrer App verwenden:
quelle
webpack.optimize.UglifyJsPlugin()
, wird das Modul durch die Optimierung des Webpacks nicht geladen, da der Zeilencode in der Bedingung immer falsch ist. Entfernen Sie ihn daher aus dem generierten BundleAngesichts des gleichen Problems wie das OP und aufgrund der Lizenzierung, bestimmten Code nicht in bestimmte Builds aufzunehmen, habe ich den Webpack-Conditional-Loader wie folgt übernommen:
In meinem Build-Befehl habe ich eine Umgebungsvariable festgelegt, die für meinen Build geeignet ist. Zum Beispiel 'Demo' in package.json:
Das verwirrende Bit, das in der von mir gelesenen Dokumentation fehlt, ist, dass ich dies während der gesamten Build-Verarbeitung sichtbar machen muss, indem ich sicherstelle, dass meine env-Variable in den globalen Prozess eingefügt wird, also in meiner webpack.config / demo.js:
Wenn dies vorhanden ist, kann ich alles bedingt ausschließen und sicherstellen, dass der zugehörige Code ordnungsgemäß aus dem resultierenden JavaScript herausgeschüttelt wird. Zum Beispiel wird in meiner route.js der Demo-Inhalt von anderen Builds ferngehalten, also:
Dies funktioniert mit Webpack 4.29.6.
quelle
Ich habe Probleme damit, env in meinen Webpack-Konfigurationen festzulegen. Was ich in der Regel will , ist Satz env , so dass es im Innern erreicht werden kann
webpack.config.js
,postcss.config.js
und in dem Einstiegspunkt Anwendung selbst (index.js
in der Regel). Ich hoffe, dass meine Erkenntnisse jemandem helfen können.Die Lösung, die ich mir ausgedacht habe, besteht darin,
--env production
oder zu übergeben--env development
und dann den Modus im Inneren einzustellenwebpack.config.js
. Dies hilft mir jedoch nicht dabei,env
zugänglich zu machen, wo ich es möchte (siehe oben), daher muss ich auchprocess.env.NODE_ENV
explizit festlegen , wie hier empfohlen . Der relevanteste Teil, den ich imwebpack.config.js
Folgenden habe, folgt.quelle
Verwenden Sie Umgebungsvariablen, um Entwicklungs- und Produktbereitstellungen zu erstellen:
https://webpack.js.org/guides/environment-variables/
quelle
Dies ist zwar nicht die beste Lösung, kann jedoch für einige Ihrer Anforderungen geeignet sein. Wenn Sie unterschiedlichen Code in Knoten und Browser ausführen möchten, funktioniert dies für mich:
quelle