Grundlagen der Webpack-Einrichtung

Zuerst installieren wir das Webpack. Dies erfolgt mithilfe der folgenden Befehle:



yarn add webpack webpack-cli -DWenn Sie den Garnpaket- Manager verwenden

npm i webpack webpack-cli --save-dev, wird das



Webpaket für den npm-Paketmanager mithilfe der Konfigurationsdatei konfiguriert webpack.config.js, die im Stammverzeichnis des Projekts gespeichert ist.



Ein Beispiel für eine Konfigurationsdatei:

const path = require('path')
module.exports = {
   watch: true,
   entry: "./src/index.js",
   output: {
       filename: "bundle.js",
       path: path.resolve(__dirname,'build'),
       publicPath: "/"
   }
};

Die anfängliche Konfiguration lautet wie folgt:

• watch - Lässt das Webpack nach Änderungen in Dateien suchen und diese neu erstellen.
• entry - Gibt den Einstiegspunkt für das Projekt an und wo mit dem Erstellen des Diagramms der internen Projektabhängigkeiten begonnen werden soll.
• Ausgabe - Gibt den Pfad an, in dem sich die erstellte Datei befindet und wie sie benannt wird.

Sie müssen auch den Webpack-Dev-Server installieren, den Sie zum Entwickeln und Debuggen der Anwendung benötigen.



yarn add webpack-dev-serverfür Paketmanagergarn oder

npm i webpack-dev-serverbei Verwendung von npm



Um webpack-dev-server zu konfigurieren, fügen Sie devServer in unsere Konfigurationsdatei ein.



Parameter für webpack-dev-server:

module.exports = {
    //...
    devServer: {
        port: 8000,
        historyApiFallback: true,
        hot: true,
    },
};

Wir müssen auch das Projektstart-Skript in unserer package.json-Datei hinzufügen / ersetzen:

"start": "webpack-dev-server --mode development",

und ein Skript zum Erstellen des Builds:

"build": "webpack --mode production"

Bootloader

Lader sind spezielle Module, mit denen andere Module "geladen" werden. Sie können auch Dateien vorverarbeiten, wenn sie importiert oder "geladen" werden.



Loader können Dateien wie TypeScript in JavaScript und Sass in CSS konvertieren. Sie können uns sogar erlauben, CSS- und HTML-Dateien direkt in unsere JavaScript-Module zu importieren. Um sie zu verwenden, müssen Sie die erforderlichen Lader im Abschnitt module.rules der Konfigurationsdatei registrieren .



Loader-Beispiele:

• babel-loader - verwendet babel zum Laden von ES2015-Dateien.
• File-Loader - zum Laden verschiedener Dateien (Bilder, Musiktitel usw.) in das Ausgabeverzeichnis
• style-loader - wird zum Laden von Stilen verwendet
• CSS-Loader - Ermöglicht das Laden von Stildateien
• @ svgr / webpack - ein Loader, mit dem Sie SVG-Bilder als JSX-Elemente verwenden können

Um Babel-Loader verwenden zu können , müssen Sie installierenbabel/ core . Installieren Sie auch die Voreinstellungbabel/ preset -env , das ES2015 + zu ES5 kompiliert, indem die von Babel benötigten Plugins und Polyfiles automatisch erkannt werden. Erstellen Sie als Nächstes eine .babelrc- Datei und fügen Sie die zuvor installierte Voreinstellung hinzu.

{
 "presets": [
   "@babel/preset-env"
 ]
}

Fügen wir nun unserer Konfiguration einen Loader zum Konvertieren von Javascript-Dateien hinzu. Auf diese Weise können wir die ES2015 + -Syntax in unserem Code verwenden (der im endgültigen Build automatisch in ES5 konvertiert wird).

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
       loader: 'babel-loader',
   },
},

Beispielkonfiguration mit File Loader

{
   test: /\.(png|jpe?g|gif)$/i,
   use: [
       {
           loader: 'file-loader',
       },
   ],
},

Beispielkonfiguration für den @ svgr / webpack-Loader

{
   test : /\.(svg)$/,
   use: [
       {
           loader: "@svgr/webpack"
       }
   ]
}

Plugins

Plugins sind das Rückgrat des Webpacks, da im Wesentlichen die gesamte Arbeit auf dem Plugin-System basiert. Sie erweitern die Fähigkeiten von Bootloadern erheblich.



Loader führen eine Vorverarbeitung von Dateien eines beliebigen Formats durch. Sie arbeiten auf der Ebene einzelner Dateien während oder vor der Paketerstellung. Nachdem die Lader fertig sind, drehen sich die Plugins. Plugins führen normalerweise nur eine Funktion aus.



Um sie zu verwenden, müssen Sie die erforderlichen Plugins im Abschnitt Plugins der Konfigurationsdatei hinzufügen .



Beispiele für Plugins:

• HTML-Webpack-Plugin - wird zum Generieren von HTML-Dateien verwendet
• copy-webpack-plugin - Kopiert einzelne Dateien oder ganze Verzeichnisse, die bereits vorhanden sind, in das Build-Verzeichnis.
• definePlugin - Ermöglicht das Erstellen globaler Konstanten
• HotModuleReplacementPlugin - Aktiviert den HMR-Modus und aktualisiert nur den geänderten Teil, ohne die Anwendung vollständig neu zu laden.

Beispielkonfiguration mit hinzugefügten Plugins:

plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.DefinePlugin({
       'process.env': JSON.stringify(process.env),
   }),
   new HtmlWebpackPlugin({
       template: "./public/index.html",
   }),
   new CopyWebpackPlugin({
       patterns: [
           { from: './public/favicon.ico', to: './public'}
       ]
   }),
],

Wir werden auch das UglifyjsWebpackPlugin-Plugin hinzufügen, das den js-Code minimiert. Dazu müssen Sie das uglifyjs-webpack-Plugin installieren und im Optimierungsabschnitt hinzufügen

optimization: {
   minimizer: [new UglifyJsPlugin()]
},