Welche Schritte sind für vue cli+webapck4 erforderlich?

Dieses Mal werde ich Ihnen die für vue cli+webapck4 erforderlichen Schritte und die Vorsichtsmaßnahmen für vue cli+webapck4 vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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

Der Modus verfügt über 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“ importiert werden können (Standard ist .json-Datei)

2. 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 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 Fehler von anderen Paketen stoßen, sollten diese durch ein Upgrade auf das neueste Paket behoben werden .

Konfigurationsdatei aktualisieren

webpack.dev.conf.js

Die Entwicklungsumgebung hat sich schließlich nicht viel geändert Die Optimierung von webpack4 ist für In der Produktionsumgebung müssen wir nur einige Plug-Ins löschen, die in dieser Datei nicht mehr benötigt werden. Zum Beispiel: webpack.NamedModulesPlugin, webpack.NoEmitOnErrorsPlugin, dessen Funktionen webpack4 standardmäßig konfiguriert wurden. Stellen Sie gleichzeitig

Modus: 'Entwicklung'
webpack.produktion.conf.js

ein

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中文网其它相关文章！

推荐阅读：

使用mint-ui在手机端做出三级联动

怎样发布vue+todo-list应用

Das obige ist der detaillierte Inhalt vonWelche Schritte sind für vue cli+webapck4 erforderlich?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!