Was ist neu in webpack4? Worauf sollte ich achten?

In diesem Artikel erfahren Sie, was in webpack4 neu ist. Worauf sollte ich achten? Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Während Entwickler noch den Nachklang von webpack3.x erleben, ist webpack4.x still und leise angekommen.

Für Benutzer sind die am meisten erwarteten Fragen wie folgt:

• Welche Änderungen gibt es in der neuen Version im Vergleich zur alten Version?

• Migration von webpack3.x auf webapck4.x?

• Worauf sollten wir bei der Verwendung von webpack4.x achten?

Neue Funktionen von Webpack

Die Stärke von Webpack als Build-Tool liegt in:

• Viele einzigartige Funktionen können in webpack.config.js konfiguriert werden;

• Seine Konfiguration ist flexibel und veränderbar

Aber aus diesem Grund; Das ist auch das Schlimme daran. Da es zu zufällig ist, ist es schwer zu kontrollieren, was zu folgenden Problemen führt:

• Die Kosten für das Erlernen, Verwenden und Recherchieren von Webpacks sind zu hoch (die Fortschrittskurve ist zu steil). ;

• Das Erstellen einer kleinen Anwendung erfordert auch die Konfiguration von webpack.config.js wie das Erstellen einer großen Anwendung (der Spatz ist klein, verfügt aber über alle internen Organe); 🎜>

  Und webpack4.x ist eine neue Version der ersten Generation von Webpack, die die bestehenden Probleme weitgehend gelöst hat.

webpackk4.x muss nicht die Konfigurationsdatei webpack.config.js verwenden

Sie können die folgenden 6 Schritte verwenden, um die Erstellung des Projekts abzuschließen:

Erstellen Sie ein Projektverzeichnis (webpack-demo) und geben Sie dann das geänderte Verzeichnis ein

1. mkdir webpack-demo && cd webpack-demo
   Initialisieren Sie das Paket .json-Datei
2. npm init -y
   Webpack- und Webpack-CLI-Abhängigkeiten laden
3. npm install webpack webpack-cli --save-dev
   Fügen Sie die Datei ~/src/index.js zum Projekt hinzu (index.js ist die Standardeintragsdatei und das Standardeintragsverzeichnis ist ~/src. Natürlich können Sie auch Passen Sie die Eintragsdatei an. Sie müssen die Hauptkonfiguration in package.json ändern. Das Element ist die angegebene Datei.

4. index.js-Dateicode lautet wie folgt:

console.log('hello webpack.')

Öffnen Sie package.json und fügen Sie den folgenden Code im Skriptkonfigurationselement hinzu:

"scripts": {
    "build": "webpack"
}

Hinweis: Dies ist der NPM-Skriptbefehl

Führen Sie den Befehl npm run build aus, und dann wird ein angezeigt ~/dist/main.js-Datei im Projekt. Im Befehlsfenster sollten Sie die folgende Warnmeldung sehen:

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

Ignorieren Sie diese Meldung. Wir haben festgestellt, dass sich die Projektinitialisierungskonfiguration von webpack4.x nicht wesentlich von webpack3.x unterscheidet, bei webpack4.x jedoch schon Die erforderliche Konfigurationsdatei webpack.config.js fehlt.

Änderungen im Verpackungsmodus

Lassen Sie uns auf die obige Eingabeaufforderung zurückblicken. Sie bedeutet: „Wenn das Konfigurationselement des Verpackungsmodus nicht festgelegt ist, ist der Standardverpackungsmodus der Produktionsmodus (Produktion) und der Entwicklungsmodus.“ (Entwicklung), Sie müssen das Moduskonfigurationselement konfigurieren. Ich denke, dass Ihre Leser das verstehen sollten webpack4 Sparen Sie Zeit und Mühe.

Aber in tatsächlichen Anwendungen unterscheiden wir oft zwischen Entwicklungsmodus und Produktionsmodus, aber in webpack4.x ist das nicht schwierig. Ändern Sie einfach die Skripte in package.json wie folgt:

"scripts": {
    "dev": "webpack --mode development", // 用于开发模式
    "build": "webpack --mode production" // 用于生产模式
}

' Ja! So einfach ist „webpack4.x“. Wir müssen nicht wie webpack3.x zwei Konfigurationsdateien für den Entwicklungsmodus und den Produktionsmodus definieren.

Überladen Sie den Eingang/Ausgang des Standardkonfigurationselements

Es gibt keine Konfigurationsdatei webpack.config.js, was nicht nur unseren Konfigurationsaufwand reduziert, sondern auch einige Fragen an uns wirft, die gerade erst einen Blick darauf werfen. Zum Beispiel: Wie kann ich den Ein-/Ausgang anpassen?

Wenn webpack.config.js nicht vorhanden ist, können wir Ein-/Aus-Konfigurationselemente in der Befehlszeile hinzufügen. Der Code lautet wie folgt:

"scripts": {
    "dev": "webpack --mode development ./src/entry.js --output ./dist/bundle.js", // 用于开发模式
    "build": "webpack --mode production ./src/entry.js --output ./dist/bundle.min.js" // 用于生产模式
}

Dies geschieht nur ohne Verwendung von webpack.config .js Ein Plan.

Das Obige sind die allgemeinen Änderungen, die webpack4.x für uns mit sich gebracht hat.

Aber die Funktionsimplementierung in den Modul- und Plugin-Konfigurationselementen in der ursprünglichen Konfigurationsdatei webpack.config.js erfordert weiterhin die Verwendung von webpack.config.js. Obwohl das Webpack-Team plant, einige häufig verwendete Loader und Plugins zu konfigurieren, wird nur das integrierte Plug-In UglifyJSPlugin implementiert, das *.js-Code komprimieren kann, ohne ihn in den Produktionsmodus einzuführen. Andere Loader und Plugins können nur über webpack.config.js eingeführt werden.

Webpack-Migration und Vorsichtsmaßnahmen

Angesichts dieser Änderungen in webpack4.x werden sich viele Menschen nicht nur fragen, ob die Migration von webpack3.x zu webpack4.x einfach ist Eigentlich kein Problem, webpack4.x ist abwärtskompatibel mit webpack.3x.

Um webpack.config.js nicht früher einzuführen, haben wir npm-Skripte verwendet. Zu diesem Zeitpunkt können wir es wie das Neuladen von Eingang/Ausgang auch in der Konfigurationsdatei webpack.config.js vervollständigen. Die Konfiguration ist die gleiche wie beim Original, aber webpack4.x weist die folgenden Probleme auf, die beachtet werden müssen:

1. 升级到webpack4.x，你会发现在使用 extract-text-webpack-plugin 分离 *.css 出文件时经常出错，这是 extract-text-webpack-plugin 本身的问题，官方推荐使用 mini-css-extract-plugin 来避免问题的出现，但使用 mini-css-extract-plugin 有一个限制就是webapck须是4.2.0版本以上（较低的版本不支持）。

2. 使用 使用babel-loader 转化ES6->ES5时将不需要 .babelrc 配置文件，你只需要在 package.json 的 scripts 中添加 --module-bind js=babel-loader 即可完成对 babel-loader 的配置。

其他的loader和plugin没有什么大的变化。其实讲到这里基本完了，下面是用webpack4.x构建的一个demo。

webpack4.x的demo

紧接上面的配置：

首先，添加 html-wepback-plugin 和 html-loader 依赖：

npm install html-webpack-plugin html-loader --save-dev

html-webpack-plugin生成html文件（html文件用来加载打包生成 bundle.js 文件），当然你也可以使用webpack支持的各种模板loader，这里使用 html-loader 支持的 *.html 类型模板来生成。

其次，添加 mini-css-extract-plugin 和 css-loader 依赖：

npm install mini-css-extract-plugin css-loader --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供代码中的 webpack.config.js 文件。

然后，添加 babel-loader 、@babel/babel-core 和 @babel/babel-preset 依赖：

npm install @babel/core babel-loader @babel/preset-env --save-dev

loader和plugin配置与webpack3.x类同，也可参考下面提供源码中的 webpack.config.js 文件。

修改 package.json 中 scripts 如下：

"scripts": {
    "dev": "webpack --mode development --module-bind js=babel-loader  ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

最后，添加 webpack-dev-server 依赖，实现项目文件修改，浏览器及时刷新

npm install webpack-dev-server

在 package.json 中 scripts 的 dev 替换 webpack 为 webpack-dev-server 即可，代码如下：

"scripts": {
    "dev": "webpack-dev-server --mode development --module-bind js=babel-loader ./src/entry.js --output ./dist/bundle.js",
    "build": "webpack --mode production ./src/entry.js --module-bind js=babel-loader --output ./dist/bundle.min.js"
},

这样一个简单的demo就完成了。

其他的loader和plugin配置和webpack3.x类同。

Das obige ist der detaillierte Inhalt vonWas ist neu in webpack4? Worauf sollte ich achten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!