So verwenden Sie Vue CLI, um webapck4 zu aktualisieren

Dieses Mal werde ich Ihnen zeigen, wie Sie Webapck4 mit Vue CLI aktualisieren. 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.

ModusauswahlModusModus 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.

json: Daten im JSON-Format, die über
1. require

   und import (Standard ist .json-Datei)

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.

javascript/esm: EcmaScript-Modul (Standard-.mjs-Datei).
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 die relevanten abhängigen Plug-Ins und optimieren Sie dann die Webapck

Konfigurationsdatei

.

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' }
}

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

推荐阅读：

vue.js实现操作class的方法

vue的todo-list组件怎么发布到npm

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue CLI, um webapck4 zu aktualisieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!