Teilen Sie 12 häufig verwendete Loader in Webpack (Zusammenfassung)

Vorwort

Ursprüngliche Absicht: Einige häufig verwendete Loader zu organisieren und mit allen zu teilen, damit Sie wissen, welchen Loader Sie in welchem ​​Szenario verwenden müssen. Wenn es da draußen große Kerle gibt, die wissen, wie man einfach leise nach links wischt, kritisieren Sie mich bitte nicht, wenn Ihnen das nicht gefällt.
Geeignet für: Junior-Frontend-Entwickler.

Stillader

Zweck: Wird verwendet, um den kompilierten CSS-Stil in das Seitenstil-Tag einzubinden. Sie müssen auf die Reihenfolge achten, in der die Loader ausgeführt werden. Der Style-Loader wird zuerst platziert, da die Loader von unten nach oben ausgeführt werden. Schließlich werden alle Kompilierungen abgeschlossen und zur Installation auf dem Style gemountet.

cnpm ich Stillader -D

Konfiguration
webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.css/,
    verwenden: ["style-loader"]
   }
  ]
 }
}

CSS-Lader

Zweck: Wird verwendet, um CSS-Dateien zu identifizieren. Um CSS zu verarbeiten, muss es zusammen mit Style-Loader verwendet werden. Wenn nur CSS-Loader installiert ist, wird der Stil nicht wirksam.
Installieren

cnpm ich CSS-Loader Stil-Loader -D

Konfiguration
webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Prüfung: /\.css/,
    verwenden: [
     "Stillader",
     "CSS-Loader"
    ]
   }
  ]
 }
}

Sass-Loader

Zweck: CSS-Präprozessor, den wir häufig bei der Projektentwicklung verwenden. Er ist sehr praktisch, um CSS zu schreiben, mit einem Wort: „großartig“.
Installieren

cnpm ich [email protected] node-sass -D

Konfiguration
index.js

importiere "index.scss"

index.scss
Körper {
 Schriftgröße: 18px;
 Hintergrund: rot;
}

webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.scss$/,
    verwenden: [
     "Stillader",
     "CSS-Lader",
     "Sass-Loader"
    ],
    einschließen: /src/, 
   },
  ]
 }
}

PostCSS-Loader

Zweck: Wird verwendet, um verschiedene Browser-Kernel-Präfixe für CSS-Stile zu ergänzen. Das ist sehr praktisch und wir müssen sie nicht manuell schreiben.
Installieren

cnpm ich postcss-loader autoprefixer -D

Konfiguration
postcss.config.js

Wenn Sie es nicht in die Datei schreiben, können Sie es auch in die Optionen von postcss-loader schreiben. Es in die Datei zu schreiben ist dasselbe, wie es dort zu schreiben.

modul.exporte = {
 Plugins: [
  erfordern("autoprefixer")({
   overrideBrowserslist: ["> 1%", "letzte 3 Versionen", "ie 8"]
  })
 ]
}

webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.scss$/,
    verwenden: [
     "Stillader",
     "CSS-Lader",
     "Sass-Loader",
    "Postcss-Loader"
    ],
    einschließen: /src/, 
   },
  ]
 }
}

babel-loader

Zweck: Konvertieren der Es6+-Syntax in die Es5-Syntax.
Installieren

cnpm ich babel-loader @babel/core @babel/preset-env -D

• babel-loader Dies ist ein Modul, das die Zusammenarbeit von Babel und Webpack ermöglicht
• @bable/core Dies ist das Kernmodul des Babel-Compilers
• @babel/preset-env Dies ist der von Babel offiziell empfohlene Presetter, der automatisch die erforderlichen Plugins und Patches hinzufügen kann, um Es6-Code entsprechend der Benutzerumgebung zu kompilieren

Konfiguration
webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.js$/,
    verwenden: {
     Lader: "babel-loader",
     Optionen:
      Voreinstellungen: [
       ['@babel/preset-env', { Ziele: "Standards"}]
      ]
     }
    }
   },
  ]
 }
}

TS-Loader

Zweck: Wird zum Konfigurieren von Projekt-Typescript verwendet
Installieren

cnpm und ts-loader typescript -D

Konfiguration
webpack.config.js
Die aktuelle Konfiguration von ts-loader wird nicht wirksam, sie kompiliert und erkennt nur .ts-Dateien. Die Hauptkonfigurationsdatei befindet sich in tsconfig.json

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.ts$/,
    verwenden: "ts-loader"
   },
  ]
 }
}

tsconfig.json

{
 "Compileroptionen": {
  "Erklärung": wahr,
  "declarationMap": true, // Debuggen der Map-Datei aktivieren "sourceMap": true,
  "target": "es5", // In Es5-Syntax konvertieren}
} 

webpack.config.js

modul.exporte = {
 Eintrag: "./src/index.ts",
 Ausgabe: {
  Pfad: __dirname + "/dist",
  Dateiname: "index.js",
 },
 Modul: {
  Regeln:
   {
    {
     Test: /\.ts$/,
     verwenden: "ts-loader",
    }
   }
  ]
 }
}

HTML-Loader

Zweck: Manchmal möchten wir einen Codeausschnitt einer HTML-Seite importieren und ihn dem Inhalt eines DOM-Elements zuweisen. In diesem Fall wird html-loader verwendet.
Installieren

cnpm ich [email protected] -D

Es wird empfohlen, eine niedrigere Version zu installieren, da höhere Versionen möglicherweise inkompatibel sind und Fehler verursachen. Ich habe die Konfiguration der Version 0.5.5 hier installiert
index.js

Inhalt aus „../template.html“ importieren

document.body.innerHTML = Inhalt

webpack.config.js
modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.html$/,
    verwenden: "html-loader"
   }
  ]
 }
}

Dateilader

Zweck: Wird zum Verarbeiten von Dateitypressourcen wie JPG, PNG und anderen Bildern verwendet. Der Rückgabewert basiert auf publicPath.
Installieren

cnpm i Dateilader -D

Konfiguration
index.js

importiere Bild aus "./pic.png"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.(png|jpg|jpeg)$/,
    verwenden: [
     {
      Lader: "Dateilader",
      Optionen:
       Name: "[name]_[hash:8].[ext]",
       öffentlicher Pfad: "https://www.baidu.com" 
      }
     }
    ]
   }
  ]
 }
}

URL-Loader

Zweck: Der URL-Loader verarbeitet auch Bildtypressourcen, unterscheidet sich jedoch ein wenig vom Datei-Loader. Der URL-Loader kann je nach Bildgröße einen anderen Vorgang festlegen. Wenn die Bildgröße größer als die angegebene Größe ist, wird das Bild als Ressource gepackt, andernfalls wird das Bild in eine Base64-Zeichenfolge konvertiert und zur Installation in die JS-Datei integriert.

cnpm ich URL-Loader -D

Konfiguration
index.js

importiere Bild aus "./pic.png"

webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.(png|jpg|jpeg)$/,
    verwenden: [
     {
      Lader: "URL-Lader",
      Optionen:
       Name: "[name]_[hash:8].[ext]",
       limit: 10240, // Die Einheit ist hier (b) 10240 => 10kb
       // Wenn es kleiner als 10 KB ist, wird es in Base64 konvertiert und in die JS-Datei gepackt. Wenn es größer als 10 KB ist, wird es in das dist-Verzeichnis gepackt.}
     }
    ]
   }
  ]
 }
}

html-mit-Bild-Loader

Zweck: Wenn wir Bilder kompilieren, verwenden wir File-Loader und URL-Loader. Diese beiden Loader suchen nach verwandten Bildressourcen in JS-Dateien, aber Dateien in HTML werden nicht durchsucht. Daher möchten wir die Bilder auch in HTML verpacken. In diesem Fall verwenden wir html-withimg-loader
Installieren

cnpm ich html-mit-Bild-Loader -D

Konfiguration
Hauptseite

<!DOCTYPE html>
<html lang="de">
<Kopf>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-kompatibel" content="IE=edge">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Startseite</title>
</Kopf>
<Text>
 <h4>Ich bin ein Kampfschwimmer</h4>
 <img src="./src/img/pic.jpg" alt="">
</body>
</html>

webpack.config.js
Wenn der Quellpfad von img während der Verpackung als [Object Module] angezeigt wird, lautet die Lösung

• Downgrade des Dateiladers auf 4.2.0
• Ändern Sie den Optionsparameter esModule auf false

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.(png|jpg|jpeg)$/,
    verwenden: {
     Lader: "Dateilader",
     Optionen:
      Name: "[name]_[hash:8].[ext]",
      öffentlicher Pfad: "http://www.baidu.com",
      esModule: false
     }
    }
   },
   {
    Test: /\.(png|jpeg|jpg)/,
    verwenden: „html-withimg-loader“
   }
  ]
 }
}

Vue-Loader

Zweck: Wird zum Kompilieren von .vue-Dateien verwendet. Wenn wir unser eigenes Vue-Projekt erstellen, können wir Vue-Loader verwenden. Werfen wir unten einen kurzen Blick darauf. Ich werde hier nicht ins Detail gehen.
Installieren

cnpm ich [email protected] vue vue-template-compiler -D

• vue-loader wird zum Identifizieren von .vue-Dateien verwendet.
• vue Selbstverständlich unterstützt die Erkennung die Vue-Syntax
• vue-template-compiler Syntax Vorlage Rendering-Engine {{}} Vorlage, Skript, Stil

Konfiguration
Haupt-JS

App aus "./index.vue" importieren
Vue aus „Vue“ importieren
neuer Vue({
 el: "#app",
 rendern: h => h(App) 
})

index.vue

<Vorlage>
 <div Klasse="Index">
 {{ msg }}
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name: "Index",
 Daten() {
 zurückkehren {
  Nachricht: „Hallo Kampfschwimmer“
 }
 },
 erstellt() {},
 Komponenten: {},
 betrachten: {},
 Methoden: {}
}
</Skript>
<Stilbereich>

</Stil>

webpack.config.js

const VueLoaderPlugin = erforderlich('vue-loader/lib/plugin')
modul.exporte = {
 Eintrag: "./src/main.js",
 Ausgabe: {
  Pfad: __dirname + "/dist",
  Dateiname: "index.js",
 },
 Modul: {
  Regeln:
   {
    Test: /\.vue$/,
    verwenden: „vue-loader“
   }
  ]
 },
 Plugins: [
  neues VueLoaderPlugin()
 ]
}

eslint-loader

Zweck: Dient zur Überprüfung, ob der Code den Vorgaben entspricht und ob Syntaxfehler vorliegen.
Installieren

cnpm ich eslint-loader eslint -D

Konfiguration
index.ts

var abc:beliebig = 123;
konsole.log(abc)

.eslintrc.js
Hier sind ein paar einfache Regeln

modul.exporte = {
 Wurzel: wahr, 
 Umgebung: {
  Browser: wahr,
 },
 Regeln:
  "no-alert": 0, // Alarm deaktivieren
  "indent": [2, 4], // Einrückungsstil "no-unused-vars": "error" // Variablendeklarationen müssen } verwenden
}

webpack.config.js

modul.exporte = {
 Modul: {
  Regeln:
   {
    Test: /\.ts$/,
    verwenden: ["eslint-loader", "ts-loader"],
    erzwingen: "pre",
    ausschließen: /node_modules/
   },
   {
    Test: /\.ts$/,
    verwenden: "ts-loader",
    ausschließen: /node_modules/
   }
  ]
 }
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die Freigabe von 12 häufig verwendeten Loadern in Webpack (Zusammenfassung). Weitere relevante Inhalte zu häufig verwendeten Loadern in Webpack finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!