webpack3.x-Migration und Upgrade

Dieses Mal werde ich Ihnen die Migration und das Upgrade von webpack3.x vorstellen. Was sind die Vorsichtsmaßnahmen für die Migration und das Upgrade von webpack3.x? Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Exkurs: Schauen Sie sich nicht die 0-Konfiguration an, da sie sehr spielerisch ist und im Grunde nicht den Anforderungen der meisten Benutzer gerecht wird. Das Hinzufügen weiterer Standardkonfigurationen macht sie jedoch relativ einfach und ist ein Out-of-the-box-Weg. Schließlich hat die 0-Konfiguration von packet zuvor wirklich viel Aufmerksamkeit auf Webpack gelenkt, und dann habe ich auch an einem einfachen Vorlagenprojekt für packet + vue gearbeitet. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen.

1. Neue Dinge in Webpack4

0. Installation

Nicht mehr nur installierenwebpackDas war’s, Sie müssen auch eine installierenwebpack-cli:

Globale Installation

sudo npm install -g webpack webpack-cli

Teilinstallation (aktueller Ordner)

npm install --save-dev webpack webpack-cli

1.0-Konfiguration

Der Standardeingang ist './src/' und der Standardausgang ist './dist'

Einstellungen für die Komprimierung (optimization.minimize) sind während der Produktion standardmäßig aktiviert und während der Entwicklung geschlossen.

Die Standardkonfiguration ist nicht auf die beiden oben genannten Elemente beschränkt.

2. mode/--mode-Parameter

Der mode/--mode-Parameter wird hinzugefügt, um anzugeben, ob es sich um den Entwicklungs- oder Produktionsmodus handelt: Entwicklung und Produktion: Die Produktion unterstützt keine Überwachung, die Produktion konzentriert sich auf die Größe der gepackten Datei und die Entwicklung konzentriert sich auf die Geschwindigkeit des Builds.

webpack --mode development

kann auch in der Konfigurationsdatei konfiguriert werden:

// webpack.config.js
module.exports = {
 mode: "production",
 // ...
}

3. Aktualisieren Sie uglifyjs

Das Webpack-basierte Projekt, das vom vorherigen Vue-Scaffolding erstellt wurde , in

sieht man deutlich diese Zeile in der Konfiguration: webpack.prod.conf.js

// UglifyJs unterstützen ES6+ nicht, man kann für besseres Treeshaking auch babel-minify verwenden: https://github .com /babel/minify

In Webpack 4.0 kann es6-Code bereits komprimiert werden, wie zum Beispiel:

class user {
 getUsername() {
  // to do
 }
}

Nach der Komprimierung ist es:

Um Loader zu entfernen, müssen Sie Regeln verwenden

Die Loader der vorherigen Version bleiben in webpack3.x erhalten und können zusammen mit Regeln verwendet werden In der neuen Version vollständig entfernt. Zusätzlich zu Loadern müssen Regeln verwendet werden.

5. sideEffects

Fügen Sie sideEffects:false zum separaten Exportieren hinzu. Verkleinern der gepackten Datei.

Verwandte Links: https://github.com/webpack/webpack/tree/master/examples/side-effects

6. webpack4 unterstützt mehrere Formen von Modultypen Manchmal müssen Sie möglicherweise einen passenden Typ hinzufügen.

Wenn es sich um die drei Modultypen CommonJS, AMD, ESM handelt, verwenden Sie javascript/auto.

Wenn es sich um EcmaScript-Module (.mjs) handelt ), verwenden Sie Javascript/ESM, andere Modultypen werden nicht wirksam;

Wenn nicht nur CommonJS- und EcmaScript-Module verfügbar sind, verwenden Sie Javascript/Dynamic; Es ist erlaubt, JSON mit „require“ und „import“ zu importieren.

Wenn es sich um Webassembly handelt, verwenden Sie webassembly/experimental – es handelt sich offiziell um eine experimentelle Funktion.

Zum Beispiel:

rules: [
 {
  test: /\.json$/,
  type: "javascript/auto"
 }
]

7. Unterstützt den ES6-Import von JSON-Dateien und kann nutzlosen Code filtern

Im Folgenden sind drei Importmethoden für JSON-Dateien aufgeführt :

let jsonData = require('./data.json');
import jsonData from './data.json'
import { first } from './data.json'

Die mit import { first } from './data.json' eingeführte JSON-Datei ignoriert den nicht importierten Code und nur der erste wird beim Packen einbezogen.

8. Entfernen Sie CommonsChunkPlugin und ersetzen Sie es durch „optimierung.splitChunks“ und „optimierung.runtimeChunk“

Hier gibt es viel Inhalt, daher werde ich ihn nicht im Detail vorstellen . Möglicherweise gibt es einen Folgeartikel zur Optimierung.splitChunks wird im Folgenden kurz vorgestellt, wenn von 3.x migriert wird. Zusätzlich zum oben genannten Link zur neuen Version werden hier einige gute Links empfohlen:

RIP CommonsChunkPlugin

Artikel zum Entfernen von CommonsChunkPlugin auf Medium

Artikel zum Webpack4-Update auf Medium

二、webpack 3.X 迁移到 webpack4.X

1. 更新webpack依赖

npm install -g webpack webpack-cli
npm install --save-dev webpack webpack-cli

2. 更新对应模块

在webpack升级的同时，对应的许多依赖也需要相应的进行升级，下面是在vuec-cli的脚手架中需要的更新；对于其他工程，注意看控制台的报错，是哪个插件报的错就去升级那个插件，如果存在找不到模块之类的错误就去升级对应的loader。

html-webpack-plugin => npm i -D html-webpacl-plugin

webpack-dev-server或者改为webpack-serve => npm i -D webpack-dev-server/npm i -D webpack-serve

vue-loader => npm i -D vue-loader

extract-text-webpack-plugin@next => npm i -D extract-text-webpack-plugin@next <br>…

3. 使用mode/–mode

在命令中加入--mode development/ --mode production或者在配置文件中加入mode: 'development'/mode: 'production'。

4. 如果使用CommonsChunkPlugin替换为optimization.splitChunks

使用栗子：

const webpack = require('webpack')；
new webpack.optimize.SplitChunksPlugin({
 chunks: "all",
 minSize: 30000,
 minChunks: 1,
 maxAsyncRequests: 5,
 maxInitialRequests: 3,
 name: true,
 cacheGroups: {
  default: {
   minChunks: 2,
   priority: -20,
   reuseExistingChunk: true,
  },
  vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
  }
 }
})

写在后面

对于webpack的这次升级这里没有一一列举，选了几个相对关键的点，具体可以去看这里；有关从webpack3.x迁移到新版的时候可能还有其他的坑需要慢慢去趟，目前遇到的基本都解决了。

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

推荐阅读：

vue+update()使用详解

具体分析webpack样式加载

Das obige ist der detaillierte Inhalt vonwebpack3.x-Migration und Upgrade. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!