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 c9ccee2e6ea535a969eb3f532ad9fe89-Tags

Fügen Sie den Export des Moduls als Stil in das DOM hinzu

Installation:

Es wird empfohlen, es mit dem CSS-Loader zu verwenden

npm install style-loader --save-dev

Verwendung:

3. CSS-Loader

{
 test: /\.css$/,
 use: [
 'style-loader',
 'css-loader'
]
}

Verwenden Sie nach dem Parsen der CSS-Datei den Import, um sie zu laden und den CSS-Code zurückzugeben

Installation:

Verwendung:

npm install css-loader --save-dev

4 . less-loader

{
 test: /\.css$/,
 use: [ 'style-loader', 'css-loader' ]
}

LESS-Dateien laden und übersetzen

Installieren:

Verwenden Sie:

npm install --save-dev less-loader less

5. URL-Loader

{
 test: /\.less$/,
 exclude: /node_modules/,
 use: ExtractTextPlugin.extract(['css-loader', 'less-loader'])
}

Ladet Dateien als base64 codierte URL

Bilddateien verarbeiten, aber wenn die Datei kleiner als das Limit ist, können Sie die Daten-URL zurückgeben

Installation:

Verwendung:

npm install --save-dev url-loader

6. Dateilader

{
 test: /\.(jpg|jpeg|png|gif)$/,
 loader: 'url-loader',
 options: {
   limit: 8192
 }
}

Weist Webpack an, das erforderliche Objekt als Datei auszugeben und seine öffentliche URL zurückzugeben

Schriftart/SVG usw. verarbeiten, die Datei an den Ausgabeordner senden und die (relative) zurückgeben ) URL

Installation:

Verwendung:

npm install file-loader --save-dev

7. Vue-Loader

{
 test: /\.(woff|woff2|svg|eot|ttf)$/,
 use: 'file-loader'
}

Laden und Übersetzen von Vue-Komponenten

Installation:

Verwendung:

npm install --save-dev vue-loader vue vue-template-compiler

Verwandte Empfehlungen:

{
 test: /\.vue$/,
 loader: 'vue-loader',
 options: {
   loaders: {
     less: ExtractTextPlugin.extract({
       use: ['css-loader', 'less-loader'],
       fallback: 'vue-style-loader'
     })
   }
 }
}

Ausführlich Erklärung des Klassenladers Klassenlader basierend auf der Java-Klassenlademethode

Wie man Loader und Plugin im Webpack versteht

Beispielanalyse, wie yii2 den Webuploader verwendet um das Hochladen von Bildern zu implementieren

Das obige ist der detaillierte Inhalt vonLoader-Analyse von webpack3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!