Loader-Analyse von webpack3

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. In diesem Artikel wird hauptsächlich die vollständige Analyse des Webpack3-Loaders vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Konzept

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

Loader sind Transformationen, die auf die Quelle angewendet werden Code eines Moduls. Sie ermöglichen es Ihnen, Dateien beim Importieren oder „Laden“ vorzuverarbeiten. Daher sind Loader eine Art „Aufgaben“ in anderen Build-Tools und bieten eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten. Loader können Dateien aus einer anderen Sprache (wie TypeScript) in JavaScript umwandeln, oder Inline-Bilder als Daten-URLs ermöglichen Ihnen sogar den direkten Import von CSS-Dateien aus Ihren JavaScript-Modulen!

Die chinesische Übersetzung lautet:

Loader wird zum Konvertieren des Quellcodes des Moduls verwendet. Mit Loadern können Sie Dateien beim Importieren oder „Laden“ von Modulen vorverarbeiten. Daher ähneln Lader „Aufgaben“ in anderen Build-Tools und bieten eine leistungsstarke Möglichkeit, Front-End-Build-Schritte zu verarbeiten. Loader können Dateien aus verschiedenen Sprachen (z. B. TypeScript) in JavaScript oder Inline-Bilder in Daten-URLs konvertieren. Mit dem Loader können Sie sogar CSS-Dateien direkt in JavaScript-Module importieren!

Daraus können wir die starke Rolle des Laders erkennen:

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

2. Das Konvertierungsobjekt ist der Quellcode. Der Loader konvertiert nur den Quellcode. Was andere Funktionen nicht können, übernehmen die Plugins.

Um es in einem Satz zusammenzufassen: Loader, eine Lademaschine, ist wie eine Sojamilchmaschine, geben Sie Ihre Zutaten hinein und es wird ernsthaft funktionieren!

Häufig verwendete Loader

1. babel-loader

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

ES2015+-Code laden, dann Babel zum Übersetzen in ES5 verwenden

Installation:

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

Verwenden Sie:

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

2. Fügt CSS hinzu das DOM durch Einfügen eines