Die folgenden Abschnitte beschreiben die wichtigsten Änderungen von webpack 1 zu 2.

resolve.root, resolve.fallback, resolve.modulesDirectories

Diese Optionen wurden durch eine einzige Option resolve.modules ersetzt. Siehe auflösen für weitere Verwendung.

 resolve: {- root: path.join(__dirname, "src")+ modules: }

resolve.extensions

Diese Option erfordert nicht mehr die Übergabe eines leeren Strings. Dieses Verhalten wurde nach resolve.enforceExtension verschoben. Siehe Auflösen für weitere Verwendung.

resolve.*

Hier wurden mehrere APIs geändert. Nicht im Detail aufgeführt, da es nicht häufig verwendet wird. Siehe auflösen für Details.

module.loaders ist jetzt module.rules

Die alte Laderkonfiguration wurde durch ein leistungsfähigeres Regelsystem ersetzt, das die Konfiguration von Ladern und mehr erlaubt. Aus Kompatibilitätsgründen ist die alte module.loaders-Syntax noch gültig und die alten Namen werden geparst. Die neuen Namenskonventionen sind einfacher zu verstehen und sind ein guter Grund, die Konfiguration auf module.rules zu aktualisieren.

 module: {- loaders: }, { test: /\.jsx$/, loader: "babel-loader", // Do not use "use" here options: { // ... } } ] }

Loader verketten

Wie in Webpack 1 können Loader verkettet werden, um Ergebnisse von Loader zu Loader weiterzugeben. Mit der Konfigurationsoption rule.use kann use auf ein Array von Loadern gesetzt werden. In Webpack 1 wurden Lader üblicherweise mit ! verkettet. Dieser Stil wird nur mit der Legacy-Option module.loaders unterstützt.

 module: {- loaders: }] }

Automatische Erweiterung des Modulnamens des Laders entfernt

Es ist nicht mehr möglich, die Erweiterung -loader wegzulassen, wenn auf Lader verwiesen wird:

 module: { rules: } ] }

Sie können immer noch das alte Verhalten mit der Konfigurationsoption resolveLoader.moduleExtensions wählen, aber dies wird nicht empfohlen.

+ resolveLoader: {+ moduleExtensions: + }

Siehe #2986 für den Grund für diese Änderung.

json-loader wird nicht mehr benötigt

Wenn kein Loader für eine JSON-Datei konfiguriert wurde, wird webpack automatisch versuchen, die JSON-Datei mit dem json-loader zu laden.

 module: { rules: }

Wir haben uns dazu entschlossen, dies zu tun, um Umgebungsunterschiede zwischen webpack, node.js und browserify auszugleichen.

Loader in der Konfiguration lösen sich relativ zum Kontext auf

In webpack 1 lösen sich konfigurierte Loader relativ zur angepassten Datei auf. In webpack 2 jedoch werden konfigurierte Lader relativ zur context-Option aufgelöst.

Dies löst einige Probleme mit doppelten Modulen, die durch Lader verursacht werden, wenn npm link verwendet wird oder Module außerhalb der context referenziert werden.

Sie können einige Hacks entfernen, um dies zu umgehen:

 module: { rules: }, resolveLoader: {- root: path.resolve(__dirname, "node_modules") }

module.preLoaders und module.postLoaders wurden entfernt:

 module: {- preLoaders: }

UglifyJsPlugin sourceMap

Die Option sourceMap der UglifyJsPlugin ist jetzt standardmäßig auf false statt true eingestellt. Das bedeutet, wenn Sie Source Maps für minimierten Code verwenden oder korrekte Zeilennummern für uglifyjs-Warnungen wünschen, müssen Sie sourceMap: true für UglifyJsPlugin setzen.

 devtool: "source-map", plugins: 

UglifyJsPlugin-Warnungen

Die compress.warnings-Option des UglifyJsPlugin ist jetzt standardmäßig auf false statt true eingestellt. Das bedeutet, dass man compress.warnings auf true setzen muss, wenn man uglifyjs-Warnungen sehen will.

 devtool: "source-map", plugins: 

UglifyJsPlugin minimiert Lader

UglifyJsPlugin schaltet Lader nicht mehr in den Minimierungsmodus. Die Einstellung minimize: true muss langfristig über Loader-Optionen übergeben werden. Siehe Loader-Dokumentation für relevante Optionen.

Der Minimierungsmodus für Lader wird in Webpack 3 oder später entfernt.

Um die Kompatibilität mit alten Ladern zu erhalten, können Lader per Plugin in den Minimierungsmodus geschaltet werden:

 plugins: 

DedupePlugin wurde entfernt

webpack.optimize.DedupePlugin wird nicht mehr benötigt. Entferne es aus deiner Konfiguration.

BannerPlugin – brechende Änderung

BannerPlugin akzeptiert nicht mehr zwei Parameter, sondern ein einziges Options-Objekt.

 plugins: 

OccurrenceOrderPlugin ist nun standardmäßig aktiviert

Das OccurrenceOrderPlugin ist nun standardmäßig aktiviert und wurde umbenannt (OccurenceOrderPlugin in webpack 1). Stellen Sie also sicher, dass Sie das Plugin aus Ihrer Konfiguration entfernen:

 plugins: 

ExtractTextWebpackPlugin – breaking change

ExtractTextPlugin benötigt Version 2, um mit Webpack 2 zu funktionieren.

npm install --save-dev extract-text-webpack-plugin

Die Konfigurationsänderungen für dieses Plugin sind hauptsächlich syntaktisch.

module: { rules: }

new ExtractTextPlugin({options})

plugins: 

Vollständige dynamische Anforderungen scheitern nun standardmäßig

Eine Abhängigkeit mit nur einem Ausdruck (z. B. require(expr)) erzeugt nun einen leeren Kontext anstelle des Kontexts des kompletten Verzeichnisses.

Code wie dieser sollte überarbeitet werden, da er nicht mit ES2015-Modulen funktioniert. Wenn dies nicht möglich ist, können Sie die ContextReplacementPlugin verwenden, um den Compiler auf die korrekte Auflösung hinzuweisen.

Verwendung von benutzerdefinierten Argumenten in CLI und Konfiguration

Wenn Sie die CLI missbraucht haben, um benutzerdefinierte Argumente an die Konfiguration zu übergeben, wie zum Beispiel:

webpack --custom-stuff

// webpack.config.jsvar customStuff = process.argv.indexOf('--custom-stuff') >= 0;/* ... */module.exports = config;

Sie werden feststellen, dass dies nicht mehr erlaubt ist. Die CLI ist jetzt strenger.

Stattdessen gibt es eine Schnittstelle zur Übergabe von Argumenten an die Konfiguration. Diese sollte stattdessen verwendet werden. Zukünftige Tools könnten sich darauf verlassen.

webpack --env.customStuff

module.exports = function (env) { var customStuff = env.customStuff; /* ... */ return config;};

Siehe CLI.

require.ensure und AMD require sind asynchron

Diese Funktionen sind jetzt immer asynchron, anstatt ihren Callback synchron aufzurufen, wenn der Chunk bereits geladen ist.

require.ensure hängt jetzt von nativen Promises ab. Wenn require.ensure in einer Umgebung verwendet wird, in der diese fehlen, wird ein Polyfill benötigt.

Die Konfiguration des Laders erfolgt über Optionen

Man kann einen Lader nicht mehr mit einer benutzerdefinierten Eigenschaft im webpack.config.js konfigurieren. Dies muss über die options erfolgen. Die folgende Konfiguration mit der Eigenschaft ts ist mit Webpack 2 nicht mehr gültig:

module.exports = { //... module: { rules: , }, // does not work with webpack 2 ts: { transpileOnly: false },};

Was sind Optionen?

Gute Frage. Nun, streng genommen sind es 2 mögliche Dinge; beide Möglichkeiten, einen Webpack-Loader zu konfigurieren. Klassischerweise hieß options query und war ein String, der an den Namen des Loaders angehängt werden konnte. Ähnlich wie ein Query-String, aber eigentlich mit mehr Befugnissen:

module.exports = { //... module: { rules: , },};

Es kann aber auch ein separat spezifiziertes Objekt sein, das zusammen mit einem Loader geliefert wird:

module.exports = { //... module: { rules: , },};

LoaderOptionsPlugin context

Einige Loader benötigen Kontextinformationen und lesen sie aus der Konfiguration. Diese müssen über Loader-Optionen in der Langzeit übergeben werden. Siehe Loader-Dokumentation für relevante Optionen.

Um die Kompatibilität mit alten Loadern zu erhalten, können diese Informationen per Plugin übergeben werden:

 plugins: 

debug

Die Option debug schaltet Loader in Webpack 1 in den Debug-Modus. Dies muss langfristig über Loader-Optionen übergeben werden. Siehe Loader-Dokumentation für relevante Optionen.

Der Debug-Modus für Loader wird in webpack 3 oder später entfernt.

Um die Kompatibilität mit alten Loadern aufrechtzuerhalten, können Loader über ein Plugin in den Debug-Modus geschaltet werden:

- debug: true, plugins: 

Code-Splitting mit ES2015

In webpack 1 konnte man require.ensure() als Methode zum Lazily-Loading von Chunks für die Anwendung verwenden:

require.ensure(, function (require) { var foo = require('./module');});

Die ES2015 Loader-Spezifikation definiert import() als Methode, um ES2015 Module dynamisch zur Laufzeit zu laden. webpack behandelt import() als einen Split-Punkt und legt das angeforderte Modul in einem separaten Chunk ab. import() nimmt den Modulnamen als Argument und gibt ein Promise zurück.

function onClick() { import('./module') .then((module) => { return module.default; }) .catch((err) => { console.log('Chunk loading failed'); });}

Gute Nachrichten: Das Fehlschlagen des Ladens eines Chunks kann jetzt behandelt werden, da sie auf Promise basieren.

Dynamische Ausdrücke

Es ist möglich, einen partiellen Ausdruck an import() zu übergeben. Dies wird ähnlich wie bei Ausdrücken in CommonJS gehandhabt (webpack erstellt einen Kontext mit allen möglichen Dateien).

import()erzeugt einen separaten Chunk für jedes mögliche Modul.

function route(path, query) { return import(`./routes/${path}/route`).then( (route) => new route.Route(query) );}// This creates a separate chunk for each possible route

Mischen von ES2015 mit AMD und CommonJS

Wie bei AMD und CommonJS können Sie alle drei Modultypen frei mischen (sogar innerhalb derselben Datei). webpack verhält sich in diesem Fall ähnlich wie babel und node-eps:

// CommonJS consuming ES2015 Modulevar book = require('./book');book.currentPage;book.readPage();book.default === 'This is a book';

// ES2015 Module consuming CommonJSimport fs from 'fs'; // module.exports map to defaultimport { readFileSync } from 'fs'; // named exports are read from returned object+typeof fs.readFileSync === 'function';typeof readFileSync === 'function';

Es ist wichtig zu beachten, dass Sie Babel anweisen wollen, diese Modulsymbole nicht zu parsen, damit webpack sie verwenden kann. Sie können dies tun, indem Sie die folgenden Einstellungen in Ihren .babelrc oder babel-loader Optionen vornehmen.

.babelrc

{ "presets": ]}

Hinweise

Keine Notwendigkeit etwas zu ändern, aber Möglichkeiten

Template-Strings

webpack unterstützt jetzt Template-Strings in Ausdrücken. Das bedeutet, dass man sie in Webpack-Konstrukten verwenden kann:

- require("./templates/" + name);+ require(`./templates/${name}`);

Configuration Promise

webpack unterstützt nun die Rückgabe eines Promise aus der Konfigurationsdatei. Dies ermöglicht eine asynchrone Verarbeitung in der Konfigurationsdatei.

webpack.config.js

module.exports = function () { return fetchLangs().then((lang) => ({ entry: '...', // ... plugins: , }));};

Erweitertes Loader-Matching

webpack unterstützt jetzt mehr Dinge, die für Loader passen.

module.exports = { //... module: { rules: , },};

Mehr CLI-Optionen

Es gibt einige neue CLI-Optionen, die Sie verwenden können:

--define process.env.NODE_ENV="production" Siehe DefinePlugin.

--display-depth Zeigt die Entfernung zum Einstiegspunkt für jedes Modul an.

--display-used-exports zeigt an, welche Exporte in einem Modul verwendet werden.

--display-max-modules legt die Anzahl der Module fest, die in der Ausgabe angezeigt werden (Standardwert ist 15).

-p definiert jetzt auch process.env.NODE_ENV bis "production".

Loader-Änderungen

Änderungen, die nur für Loader-Autoren relevant sind.

Cacheable

Loader sind jetzt standardmäßig cachefähig. Lader müssen sich abmelden, wenn sie nicht cachefähig sind.

 // Cacheable loader module.exports = function(source) {- this.cacheable(); return source; }

 // Not cacheable loader module.exports = function(source) {+ this.cacheable(false); return source; }

Komplexe Optionen

Webpack 1 unterstützt nur JSON.stringify-fähige Optionen für Lader.

Webpack 2 unterstützt nun jedes JS-Objekt als Laderoptionen.