Inhaltsverzeichnis
1. Neue Funktionen von Webpack 3
1.1 Aktualisierungsmethode und Versionsmigration
1.2 Scope Hoisting
1.3 Magische Kommentare
2. Nächste neue Funktionen
3. Zusammenfassung
Heim Web-Frontend js-Tutorial Was sind die neuen Funktionen von Webpack3?

Was sind die neuen Funktionen von Webpack3?

Jun 21, 2017 am 09:41 AM
web webpack 特性

In diesem Artikel werden zu Ihrer Information kurz die neuen Funktionen in der neuesten Version von Webpack 3 vorgestellt.

1. Neue Funktionen von Webpack 3

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

1.1 Aktualisierungsmethode und Versionsmigration

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
Nach dem Login kopieren

oder

yarn add webpack@3.0.0 --dev
Nach dem Login kopieren

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.

1.2 Scope Hoisting

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()
  ]
};
Nach dem Login kopieren

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.

1.3 Magische Kommentare

Tatsächlich können Sie den Chunk-Namen befehlen.

import(/* webpackChunkName: "my-chunk-name" */ 'module');
Nach dem Login kopieren

Weitere Informationen zur Verwendung finden Sie hier.

2. Nächste neue Funktionen

  • 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

3. Zusammenfassung

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Beherrschen Sie die Schlüsselkonzepte von Spring MVC: Verstehen Sie diese wichtigen Funktionen Beherrschen Sie die Schlüsselkonzepte von Spring MVC: Verstehen Sie diese wichtigen Funktionen Dec 29, 2023 am 09:14 AM

Beherrschen Sie die Schlüsselkonzepte von Spring MVC: Verstehen Sie diese wichtigen Funktionen

So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche Mar 20, 2024 pm 06:56 PM

So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche

Ist PHP Front-End oder Back-End in der Webentwicklung? Ist PHP Front-End oder Back-End in der Webentwicklung? Mar 24, 2024 pm 02:18 PM

Ist PHP Front-End oder Back-End in der Webentwicklung?

Was sind Webstandards? Was sind Webstandards? Oct 18, 2023 pm 05:24 PM

Was sind Webstandards?

Golangs Browserunterstützung: Aufbau eines interaktiven Webs Golangs Browserunterstützung: Aufbau eines interaktiven Webs Apr 07, 2024 pm 04:03 PM

Golangs Browserunterstützung: Aufbau eines interaktiven Webs

Wählen Sie je nach Bedarf und Funktionen die passende Go-Version Wählen Sie je nach Bedarf und Funktionen die passende Go-Version Jan 20, 2024 am 09:28 AM

Wählen Sie je nach Bedarf und Funktionen die passende Go-Version

So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden Mar 11, 2024 am 10:26 AM

So implementieren Sie h5, um auf der Webseite nach oben zu schieben und die nächste Seite zu laden

Integrieren Sie Konversations-KI in Ihre Webanwendungen Integrieren Sie Konversations-KI in Ihre Webanwendungen Nov 02, 2023 am 11:04 AM

Integrieren Sie Konversations-KI in Ihre Webanwendungen

See all articles