In diesem Artikel werden zu Ihrer Information kurz die neuen Funktionen in der neuesten Version von Webpack 3 vorgestellt.
Am 20. Juni veröffentlichte Webpack die neueste Version 3.0 und kündigte sie auf Medium an.
Webpack ist mittlerweile fast der Standard für die Frontend-Entwicklung, also werfen wir einen Blick auf die wichtigsten Funktionsupdates in der neuen Version.
Die allgemeinen Änderungen sind im Vergleich zu 2.0 nicht groß, also keine Panik.
Zugehörige Video-Tutorials zu Webpack 2.0 finden Sie in den 20 Episoden der von mir aufgezeichneten Video-Tutorials, Webpack 2 Video Tutorials.
Das Folgende ist die Funktionsliste in Version 3.0.
node_modules werden in den Statistiken nicht mehr zu ~ verstümmelt [Breaking Change]
Timeout für HMR-Anfragen ist konfigurierbar
experimentelles Scope Hoisting (webpack.optimize.ModuleConcatenationPlugin) hinzugefügt
einige Leistungsverbesserungen
output.libraryExport hinzugefügt, um einen Export auszuwählen für die Bibliothek
sourceMapFilename unterstützt jetzt [contenthash] [Breaking Change]
module.noParse unterstützt Funktionen
Knoten hinzufügen: Option „Falsch“ zum Deaktivieren aller knotenspezifischen Ergänzungen
Sie können es direkt über den von Ihnen benötigten Befehl installieren um es später hinzuzufügen Versionsnummer.
npm install webpack@3.0.0 --save-dev
oder
yarn add webpack@3.0.0 --dev
Was das Upgrade von Webpack 2 auf Webpack 3 betrifft, lauten die offiziellen Worte:
Kein Aufwand außer der Ausführung der Upgrade-Befehle in Ihrem Terminal
Daher kann man schlussfolgern, dass sich die Versionsnummer zwar erheblich geändert hat, sich aber nicht viel ändern wird, sodass Sie aufatmen können.
Jedes Modul zuvor war in einem unabhängigen Funktionsabschluss enthalten. Diese Verarbeitungsmethode verursachte das Problem der langsamen Codeausführung im Browser.
Nachdem das Entwicklungsteam auf Frameworks wie Closure Compiler und RollupJS zurückgegriffen hatte, änderte es die Wrapping-Methode von Funktionsabschlüssen in eine konfigurierbare Form.
Konfigurieren Sie es einfach in den vorherigen Plugins.
module.exports = {
plugins: [
new webpack.optimize.ModuleConcatenationPlugin()
]
}; Natürlich kann es sein, dass die Konfiguration aufgrund des Ladens einiger Module nicht erfolgreich ist. Die offiziellen CLI-Parameter --display-optimization-bailout werden zum Debuggen bereitgestellt, was dazu führt, dass die Konfiguration fehlschlägt.
Tatsächlich können Sie den Chunk-Namen befehlen.
import(/* webpackChunkName: "my-chunk-name" */ 'module');
Weitere Informationen zur Verwendung finden Sie hier.
Besserer Kompilierungscache
Schnelle erste und inkrementelle Kompilierungsgeschwindigkeit
Freundlichere Unterstützung für TypeScript
Langfristiges Caching ändern
Unterstützung für WASM-Modulunterstützung hinzufügen
Verbesserung der Benutzererfahrung
Insgesamt gibt es keine großen Änderungen, und daMagic Comments andere Funktionen veröffentlicht wurden Version 2.4 Ich persönlich bin der Meinung, dass die Veröffentlichung einer Version 3.0 vor allem ein Symbol für die Entschlossenheit des Teams ist, bessere Produkte anzubieten.
Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von Webpack3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
