Tutorial zur Verwendung von Webpack in JavaScript

Tutorial zur Verwendung von Webpack in JavaScript

0. Was ist Webpack

Bildbeschreibung hier einfügen

Webpack ist ein Front-End-Tool zum Laden/Verpacken von Ressourcen. Es führt eine statische Analyse basierend auf den Modulabhängigkeiten durch und generiert dann gemäß den angegebenen Regeln entsprechende statische Ressourcen für diese Module.

1. Einsatz von Webpack

1. Initialisieren Sie das Projekt

npm init

2. Installieren Sie die von Webpack benötigten Pakete

npm install --save-dev webpack-cli webpack

3. Webpack konfigurieren
Fügen Sie den Befehl zum Ausführen der Kompilierung in der Datei package.json hinzu

  "Skripte": {
    "webpack": "webpack"
    // Anpassbare Konfigurationsdatei: „webpack“: „webpack --config webpack.js“
  },

4. Erstellen Sie eine Konfigurationsdatei (Standard: webpack.config.js) und konfigurieren Sie sie.

const path = require('Pfad');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: './src/index.js',
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: „bundle.js“,
    },
};

5. Verpacken und testen

C:\Benutzer\Daixiang\Desktop\demo>npm run webpack

> [email protected] webpack C:\Benutzer\Daixiang\Desktop\demo
> webpack --config webpack.config.js

assetbundle.js 4,34 KiB [verglichen mit emit] (Name: main)
Laufzeitmodule 670 Bytes 3 Module
zwischenspeicherbare Module 231 Bytes
  ./src/index.js 159 Bytes [erstellt] [Code generiert]
  ./src/Base.js 72 Bytes [erstellt] [Code generiert]
webpack 5.59.1 erfolgreich in 113 ms kompiliert

2. Kernkonzepte von Webpack

  • Eintrag gibt die Eintragsdatei an.
  • Ausgabe gibt ausgabebezogene Informationen an.
  • Loader können Webpack dabei helfen, diese Nicht-JavaScript-Dateien zu verarbeiten.
  • Plugins werden verwendet, um ein breiteres Spektrum an Aufgaben auszuführen.

2.1 Eintrag

2.1.1 Einzeleintrag

Zwei Möglichkeiten, einen einzelnen Eintrag zu schreiben:

Schreibmethode 1: Eintrag: './src/index.js'

Schreibmethode 2: Eintrag: {main: './src/index.js'}

webpack.config.js

const path = require('Pfad');

modul.exporte = {
    Modus: "Entwicklung",
    // Eintrag: './src/index.js',
    Eintrag: {
        Haupt: "./src/index.js"
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: „bundle.js“,
    },
};

2.1.2 Mehrere Eingänge

webpack.config.js

const path = require('Pfad');

modul.exporte = {
    Modus: "Entwicklung",
    //Mehrfacheintrag: {
        Haupt: "./src/index.js",
        Basis: './src/Base.js',
        über: './src/About.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: „bundle.js“,
    },
};

2.2 Ausgabe

2.2.1 Ausgabe mit Einzeleingabe

Wenn nur ein Eintrag vorhanden ist, passen Sie den Ausgabedateinamen an.
webpack.config.js

    Ausgabe: {
    	// Pfad Pfad: path.resolve(__dirname, 'dist'),
        // Dateiname: 'bundle.js',
    },

2.2.2 Ausgabe mit mehreren Eingängen

Bei mehreren Einträgen wird der Dateiname dynamisch ausgegeben.
webpack.config.js

    Ausgabe: {
    	// Pfad Pfad: path.resolve(__dirname, 'dist'),
        // Dynamischer Ausgabedateiname Dateiname: '[name].js',
    },

2.3 Lader

Loader ist ein Modul, das es Webpack ermöglicht, Nicht-JS-Dateien zu verarbeiten.
Referenzdokument zur Loader-Konfiguration: https://webpack.docschina.org/loaders/
webpack.config.js

    Modul: {
        Regeln:
            {
                // Normaler passender Dateitest: /\.js$/,
                // Ordner ausschließen exclude: /node_modules/,
                // Den angegebenen Loader verwenden
                Lader: „Babel-Loader“
            }
        ]
    }

Es ist zu beachten, dass zum Kompilieren der neuen API core-js eingeführt werden muss
1. Installieren Sie core-js mit npm

npm install --save-dev core-js

2. Führen Sie core-js/stable in die js-Eintragsdatei ein

importiere „core-js/stable“;

3. Verpacken und testen

npm führt Webpack aus

2.4 Plugins

Plugins sind Plugins, die zur Ausführung einer größeren Bandbreite von Aufgaben verwendet werden.
Referenzdokument zur Plugin-Konfiguration: https://webpack.docschina.org/plugins
Nehmen Sie html-webpack-plugin als Beispiel, um das Plug-In zu installieren.
1. Installieren Sie das HTML-Webpack-Plugin mit npm

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

2. Konfigurieren Sie die Datei webpack.config.js

const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
Plugins: [neues HtmlWebpackPlugin()],

webpack.config.js

const path = require('Pfad');
// Dateien importieren und Konstanten definieren const HtmlWebpackPlugin = require('html-webpack-plugin');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.js$/,
                // Ordner ausschließen exclude: /node_modules/,
                // Den angegebenen Loader verwenden
                Lader: „Babel-Loader“
            }
        ]
    },
    Plugins: [
        // Einzelner Eintrag // neues HtmlWebpackPlugin(
        // {
        //Geben Sie die Vorlagendatei an und fügen Sie das generierte JS und andere Dateien in die Vorlagendatei ein // Vorlage: './index.html'
        // }
        // )
        //Mehrere Einträge für neues HtmlWebpackPlugin(
            {
                Vorlage: './index.html',
                Dateiname: 'index.html',
                Stücke:['Index'],
                minimieren:
                    // Kommentare löschen removeComments: true,
                    // Leerzeichen entfernen removeWhitespace: false,
                    // Doppelte Anführungszeichen aus HTML-Tag-Attributen entfernen removeAttributeQuotes: true
                }
            }
        ),
        neues HtmlWebpackPlugin(
            {
                Vorlage: './search.html',
                Dateiname: 'search.html',
                Brocken:['Suche']
            }
        )
    ],
};

3. Verpacken und testen

npm führt Webpack aus

Hauptseite

<!DOCTYPE html>
<html lang=zh>
<Kopf>
    <Meta-Zeichensatz=UTF-8>
    <meta http-equiv=X-UA-Kompatibler Inhalt="IE=edge">
    <Titel>Index</Titel>
<Skript defer=defer src=index.js></Skript></Kopf>
<Text>
</body>
</html>

suche.html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <title>Suche</title>
    </Stil>
<script defer src="search.js"></script>
</Kopf>
<Text>
</body>
</html>

3. Webpack verarbeitet CSS-Dateien

3.1 In HTML eingebettetes <style>-Tag

1. Installieren Sie den CSS-Loader, um CSS-Dateien in JS zu identifizieren, installieren Sie den Style-Loader und betten Sie CSS-Dateien in HTML ein

npm install --save-dev CSS-Loader Style-Loader

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

    Modul: {
        Regeln:
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.css$/,
                // CSS-Loader verwenden, um CSS in JS zu identifizieren, und Style-Loader verwenden, um CSS-Dateien in HTML einzubetten. // Auf die Reihenfolge des Arrays achten, von rechts nach links verwenden: ['style-loader', 'css-loader']
            }
        ]
    },

3. Verpacken und testen

npm führt Webpack aus

3.2 Einführung von HTML in Form des <link>-Tags

Verwenden Sie den CSS-Loader, um CSS in JS zu identifizieren, und verwenden Sie das Mini-CSS-Extract-Plugin, um CSS-Dateien zu importieren.
1. Installieren Sie CSS-Loader und Mini-CSS-Extract-Plugin

npm install --save-dev CSS-Loader Mini-CSS-Extrakt-Plugin

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

const path = require('Pfad');
......
const MiniCssExtractPlugin = erfordern('mini-css-extract-plugin');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
			......
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.css$/,
                // CSS-Loader verwenden um CSS in JS zu identifizieren, MiniCssExtractPlugin.loader verwenden um CSS-Dateien zu importieren // Auf die Reihenfolge des Arrays achten, von rechts nach links verwenden: [MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    },
    Plugins: [
        neues MiniCssExtractPlugin(
            {
                Dateiname: „css/[name].css“
            }
        )
    ],
};

3. Verpacken und testen

npm führt Webpack aus

dist/index.html

<!DOCTYPE html>
<html lang=zh>
<Kopf>
    <Meta-Zeichensatz=UTF-8>
    <meta http-equiv=X-UA-Kompatibler Inhalt="IE=edge">
    <Titel>Index</Titel>
    <Skript defer=defer src=index.js></Skript>
    <link href=css/index.css rel=stylesheet>
</Kopf>
<Text>
</body>
</html>

4. Webpack verarbeitet Bilder in CSS

4.1 Verwenden Sie den Dateilader, um Bilder in CSS zu verarbeiten

Verwenden Sie einen Dateilader, um Bilder in CSS zu verarbeiten. (Dateilader ist in Version 5 veraltet)
Referenzdokumentation zum Dateilader: https://v4.webpack.js.org/loaders/file-loader/
index.css

Körper{
    Hintergrundbild: URL (./images/3.jpg);
    Hintergrundwiederholung: keine Wiederholung;
}

1. Installieren Sie den File-Loader

npm install --save-dev Dateilader

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

const path = require('Pfad');
......
const MiniCssExtractPlugin = erfordern('mini-css-extract-plugin');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
            ......
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.css$/,
                // Verwenden Sie CSS-Loader, um CSS in JS zu identifizieren, und verwenden Sie MiniCssExtractPlugin.loader, um CSS-Dateien zu importieren. // Achten Sie auf die Reihenfolge des Arrays, verwenden Sie es von rechts nach links: [
                    {
                        Lader: MiniCssExtractPlugin.loader,
                        Optionen:
                            öffentlicher Pfad: '../'
                        }
                    },
                    „CSS-Lader“
                ]
            },
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.(jpe?g|png|gif)$/,
                verwenden: {
                    Lader: 'Dateilader',
                    Optionen:
                        Name: 'img/[name].[ext]'
                    }
                }
            }
        ]
    },
    Plugins: [
        //Mehrere Einträge für neues HtmlWebpackPlugin(
            {
                Vorlage: './index.html',
                Dateiname: 'index.html',
                Brocken: ['Index'],
                minimieren:
                    // Kommentare löschen removeComments: true,
                    // Leerzeichen löschen collapseWhitespace: false,
                    // Doppelte Anführungszeichen aus HTML-Tag-Attributen entfernen removeAttributeQuotes: true
                }
            }
        ),
        neues HtmlWebpackPlugin(
            {
                Vorlage: './search.html',
                Dateiname: 'search.html',
                Brocken: ['Suche']
            }
        ),
        neues MiniCssExtractPlugin(
            {
                Dateiname: „css/[name].css“
            }
        )
    ],
};

3. Verpacken und testen

npm führt Webpack aus

4.2 Verwenden Sie html-withimg-loader, um Bilder in HTML zu verarbeiten

1. Installieren Sie html-withimg-loader

npm install --save-dev html-withimg-loader

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

const path = require('Pfad');
const HtmlWebpackPlugin = erfordern('html-webpack-plugin');
const MiniCssExtractPlugin = erfordern('mini-css-extract-plugin');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.js$/,
                // Ordner ausschließen exclude: /node_modules/,
                // Den angegebenen Loader verwenden
                Lader: „Babel-Loader“
            },
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.css$/,
                // Verwenden Sie CSS-Loader, um CSS in JS zu identifizieren, und verwenden Sie MiniCssExtractPlugin.loader, um CSS-Dateien zu importieren. // Achten Sie auf die Reihenfolge des Arrays, verwenden Sie es von rechts nach links: [
                    {
                        Lader: MiniCssExtractPlugin.loader,
                        Optionen:
                            öffentlicher Pfad: '../'
                        }
                    },
                    „CSS-Lader“
                ]
            },
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.(jpe?g|png|gif)$/,
                verwenden: {
                    Lader: 'Dateilader',
                    Optionen:
                        Name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            },
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.(html?)$/,
                Lader: „html-mit-Bild-Lader“
            }
        ]
    },
    Plugins: [
        //Mehrere Einträge für neues HtmlWebpackPlugin(
            {
                Vorlage: './index.html',
                Dateiname: 'index.html',
                Brocken: ['Index'],
                minimieren:
                    // Kommentare löschen removeComments: true,
                    // Leerzeichen löschen collapseWhitespace: false,
                    // Doppelte Anführungszeichen aus HTML-Tag-Attributen entfernen removeAttributeQuotes: true
                }
            }
        ),
        neues HtmlWebpackPlugin(
            {
                Vorlage: './search.html',
                Dateiname: 'search.html',
                Brocken: ['Suche']
            }
        ),
        neues MiniCssExtractPlugin(
            {
                Dateiname: „css/[name].css“
            }
        )
    ],
};

3. Verpacken und testen

npm führt Webpack aus

4.3 Verwenden Sie den Dateilader, um Bilder in js zu verarbeiten

index.js

importiere Bild aus „./images/1.jpg“;

1. Installieren Sie den File-Loader

npm install --save-dev Dateilader

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

const path = require('Pfad');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
            ......
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.(jpe?g|png|gif)$/,
                verwenden: {
                    Lader: 'Dateilader',
                    Optionen:
                        Name: 'img/[name].[ext]',
                        esModule: false
                    }
                }
            }
        ]
    },
};

3. Verpacken und testen

npm führt Webpack aus

4.4 Verwenden Sie den URL-Loader zum Verarbeiten von Bildern

index.js

importiere Bild aus „./images/1.jpg“;

1. URL-Loader und File-Loader installieren

npm install --save-dev URL-Loader Datei-Loader

2. Konfigurieren Sie die Datei webpack.config.js
webpack.config.js

const path = require('Pfad');

modul.exporte = {
    Modus: "Entwicklung",
    Eintrag: {
        Index: "./src/index.js",
        Suche: './src/search.js',
    },
    Ausgabe: {
        Pfad: Pfad.auflösen(__dirname, 'dist'),
        Dateiname: '[name].js',
    },
    Modul: {
        Regeln:
            ......
            {
                // Test zur Übereinstimmung mit regulären Ausdrücken: /\.(jpe?g|png|gif)$/,
                verwenden: {
                    Lader: 'URL-Lader',
                    Optionen:
                        Name: 'img/[name].[ext]',
                        esModule: false,
                        Limit: 10000 // Bilder kleiner als 10 KB werden in das Base64-Format konvertiert}
                }
            }
        ]
    },
};

3. Verpacken und testen

npm führt Webpack aus

Dies ist das Ende dieses Artikels über die Verwendung von Webpack in JavaScript. Weitere Informationen zur Verwendung von JavaScript Webpack finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Verwenden Sie Webpack, um eine pixi.js-Entwicklungsumgebung zu erstellen
  • Detaillierte Erklärung zur Verwendung von Webpack + Electron + ReactJs zur Entwicklung von Windows-Desktopanwendungen
  • Lösung für Verpackungsfehler bei der Verwendung von uglifyjs zum Komprimieren von JS in webpack3
  • Detaillierte Erklärung zur Verwendung von Webpack zum Schreiben der JSX-Syntax in einem Vue-Projekt
  • Beispiel für die Verwendung von MockJS zum Simulieren von Backend-Daten in Vue+Vuecli+Webpack
  • React.js – Erste Schritte – Tutorial zur Verwendung von Webpack mit Umgebung

<<:  Docker-Dateispeicherpfad, Port-Mapping-Betriebsmodus ändern

>>:  Automatische Zeilenumbrüche in HTML-Pre-Tags

Artikel empfehlen

MariaDB unter Linux startet mit dem Root-Benutzer (empfohlen)

Da ich Sicherheitsprodukte testen musste, wollte ...

Gängige Master-Slave-Replikationsarchitekturen in MySQL 4

Inhaltsverzeichnis Replikationsarchitektur mit ei...

Details zum MySQL-Index-Pushdown

Inhaltsverzeichnis 1. Prinzip des ganz linken Prä...

Reines CSS, um coole Neonlichteffekte zu erzielen (mit Demo)

Ich habe kürzlich die Tutorial-Reihe zu CSS-Anima...

So erstellen Sie ein CentOS-Basisimage

Vorwort Derzeit ist das von meiner Firma verwende...

Detaillierte Erläuterung des Prinzips der Vue-Überwachungsdaten

<Text> <div id="Wurzel"> &l...

Analyse des Produktstatus im interaktiven Design, der im Design nicht ignoriert werden kann

Beim Produktdesign legen Designer Wert darauf, das...

13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...

Mobile Web-Bildschirmanpassung (rem)

Vorwort Ich habe vor Kurzem meine bisherigen Noti...

So lösen Sie das Problem der Groß-/Kleinschreibung bei MySQL-Abfragen

Frage Als ich kürzlich ein praktisches Projekt mi...

Umfassende Zusammenfassung der MySQL-Tabellen

Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...

MySQL-Konfiguration Master-Slave-Server (ein Master und mehrere Slaves)

Inhaltsverzeichnis Ideen Hostkonfiguration Konfig...

Detaillierte Erklärung, wie Komponenten in React kommunizieren

1. Was ist Wir können die Kommunikation zwischen ...

Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik

Vorwort Linux verfügt über entsprechende Open-Sou...

So ändern Sie das Root-Passwort von MySQL in Docker

Der erste Schritt besteht darin, einen MySQL-Cont...