Loader-Nutzungsanalyse von webpack3

Dieses Mal bringe ich Ihnen die Loader-Nutzungsanalyse von webpack3. Was sind die Vorsichtsmaßnahmen für die Loader-Nutzungsanalyse in webpack3?

Zeigen Sie zunächst die offizielle Website von Webpack. Was kann Webpack? Die Antwort auf der offiziellen Website lautet in einem Satz: Es macht alles einfach!

Es tauchen endlos verschiedene Lader auf, die uns beim Bauen ratlos machen. Hier fassen wir die vollständige Analyse der Lader zusammen.

Konzept

Loader, wie der Name schon sagt, Loader, die englische Erklärung lautet wie folgt:

Loader sind Transformationen, die auf den Quellcode eines angewendet werden Modul Sie ermöglichen es Ihnen, Dateien beim Importieren oder „Laden“ vorzuverarbeiten. Sie sind also so etwas wie „Aufgaben“ in anderen Build-Tools und bieten eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten Transformieren Sie Dateien aus einer anderen Sprache (wie TypeScript) in JavaScript oder Inline-Bilder als Daten-URLs ermöglichen Ihnen dies sogar Dinge wie CSS-Dateien direkt aus Ihren JavaScript-Modulen importieren!

Die chinesische Übersetzung lautet:

Der Loader dient zur Konvertierung des Quellcodes des Moduls. Mit dem Loader können Sie Dateien beim Importieren oder „Laden“ von Modulen vorverarbeiten. Deshalb Lader Ähnlich wie „Aufgaben“ in anderen Build-Tools und bietet eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten. Der Loader kann Dateien aus verschiedenen Sprachen laden, z TypeScript) zu JavaScript oder Inline-Bilder zu Daten-URLs. Mit dem Loader können Sie sogar JavaScript direkt verwenden CSS-Dateien in das Modul importieren!

Daraus können wir die mächtige Rolle des Laders erkennen:

1. Die Rolle der Konvertierung. Alles, was in der Entwicklung verwendet wird, wird in Dateien in den erforderlichen Formaten wie html+css+js+img konvertiert, die zum Laden der Webseite erforderlich sind.

2. Das Konvertierungsobjekt ist der Quellcode. Der Loader konvertiert nur den Quellcode, die Plugins übernehmen das, was er nicht kann.

Um es in einem Satz zusammenzufassen: Loader, eine Lademaschine, ist wie eine Sojamilchmaschine, und sie beginnt ernsthaft zu arbeiten!

Häufig verwendete Lader

1. Babel-Loader

Dieses Paket ermöglicht das Transpilieren von JavaScript-Dateien mit Babel und Webpack.

Laden Sie den ES2015+-Code und transpilieren Sie ihn mit Babel nach ES5

Installation:

npm install --save-dev babel-loader babel-core babel-preset-env webpack

Verwendung:

{
 test: /\.js$/,
 exclude: /node_modules/,
 loader: 'babel-loader'
}

2. Style-Loader

Fügt CSS zum DOM hinzu, indem ein