Detaillierte Erläuterung der Schritte zum Upgrade von Webpack4 für Vue CLI

Dieses Mal werde ich Ihnen die Schritte zum Upgrade von webpack4 von vue cli ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für das Upgrade von webpack4 von vue cli?

webpack4 ist seit einiger Zeit veröffentlicht und das Plug-in-System hat sich stabilisiert. Ich bin mit der Verpackungsgeschwindigkeit von webpack3 nicht zufrieden, daher habe ich beschlossen, das Projekt, an dem ich gerade arbeite, zu aktualisieren Ich möchte Webpack4 üben.

Neue Funktionen

0 Konfiguration

Es sollte sein, dass das Webpack-Team nach der Veröffentlichung von Parcel erkannte, dass seine Konfiguration tatsächlich etwas kompliziert ist und der Anfang ist nicht einfach. Daher beginnt webapck4, den Start ohne Konfiguration zu unterstützen. Dasselbe gilt jedoch weiterhin. Die 0-Konfiguration von webpack4 unterstützt nur den Standardeintrag und die Standardausgabe, d. h. der Standardeintrag ist ./src und die Standardausgabe ist /dist.

ModusauswahlModus

Modus hat zwei Optionen: Produktion und Entwicklung. Als erforderliche Option kann der Modus nicht standardmäßig festgelegt werden. Im Produktionsmodus werden standardmäßig einige notwendige Optimierungen vorgenommen, z. B. Codekomprimierung und Bereichsförderung, und Process.env.NODE_ENV wird standardmäßig als Produktion angegeben. Im Entwicklungsmodus werden inkrementelle Builds optimiert, Kommentare und Eingabeaufforderungen werden unterstützt und Quellzuordnungen unter Eval werden unterstützt, während Process.env.NODE_ENV standardmäßig als Entwicklung angegeben ist.

Nebenwirkungen

Diese Konfiguration kann das Verpackungsvolumen erheblich reduzieren. Wenn die package.json des Moduls mit sideEffects:false konfiguriert ist, zeigt dies an, dass das Modul keine Nebenwirkungen hat, was bedeutet, dass Webpack den für erneute Exporte verwendeten Code sicher bereinigen kann.

Modultypen

webpack4 bietet 5 Modultypen.

1. json: Daten im JSON-Format, die über require und import (Standard ist .json-Datei)

2. importiert werden können webassembly: WebAssembly-Modul (derzeit der Standardtyp für .wasm-Dateien)

3. javascript/auto: (Standardtyp in Webpack 3) unterstützt alle JS-Modulsysteme: CommonJS, AMD.

4. javascript/esm: EcmaScript-Modul (Standard-.mjs-Datei).

5. javascript/dynamisch: Unterstützt nur CommonJS und AMD.

JSON

Webpack 4 unterstützt nicht nur die native Verarbeitung von JSON, sondern auch Tree Shaking von JSON. Wenn Sie die ESM-Syntax zum Importieren von JSON verwenden, eliminiert Webpack ungenutzte Exporte im JSON-Modul. Wenn Sie außerdem den Loader zum Konvertieren von JSON in JS verwenden möchten, müssen Sie den Typ auf Javascript/Auto setzen.

Optimierung

Webpack 4 hat das CommonsChunkPlugin entfernt und viele seiner Funktionen standardmäßig aktiviert. Daher kann webpack4 eine gute Standardoptimierung erreichen. Für diejenigen, die jedoch benutzerdefinierte Caching-Strategien benötigen, wurden Optimierung.splitChunks und Optimierung.runtimeChunk hinzugefügt. Eine spezifische Erklärung finden Sie in diesem Artikel, der ausführlich erläutert wird. RIP CommonsChunkPlugin Klicken Sie zur Vorschau
.

Schrittweises Upgrade

Im Allgemeinen verlief das Upgrade relativ reibungslos. Hier teilen wir es zunächst in zwei Schritte auf Aktualisieren Sie verwandte abhängige Plug-Ins und optimieren Sie dann die WebapckKonfigurationsdatei.

Plug-Ins aktualisieren

Aktualisieren Sie zunächst die unten aufgeführten Plug-Ins auf die entsprechende Version oder die neueste Version

webpack@ 4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2. 2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,
webpack-dev-middleware@ 3.1.0,
webpack-dev-server@3.1.1,
webpack-hot-middleware@2.21.2

Wenn Sie auf andere Paketfehler stoßen, sollten diese behoben werden Upgrade auf die neueste Version.

Konfigurationsdatei aktualisieren

webpack.dev.conf.js

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

总结

总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue todo-list组件上传npm

JS操作DOM删除节点

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zum Upgrade von Webpack4 für Vue CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!