Was macht css-loader im Webpack?

Question

Gemäß der offiziellen webapck-Dokumentation importiert webpack bestimmte CSS-Dateien mit einem Loader namens css-loader in Ihr JavaScript-Modul.

Was nützt dieser Prozess? Wie kann man einfach nicht mit der alten Schule gehen, eine CSS-Datei mit dem Link-Tag mit Ihrem HTML-Code zu verknüpfen?

Answer 1

Ich gebe Ihnen ein gutes Beispiel für ein Szenario, in dem die Verbindung der CSS nicht möglich ist.

Wenn Sie eine ASP.NET Core MVC-Anwendung entwickeln und einige CSS aus dem Ordner node_modules verwenden möchten, können Sie den Pfad zu diesem Ordner nicht auflösen. Dies geschieht, weil ASP.NET nur Dateien aus dem Verzeichnis wwwroot bereitstellt.

Aus diesem Grund benötigen Sie ein Build-System wie Webpack.

Mit einem CSS-Loader im Webpack wird es nach jedem CSS-Verweis in den als Einträge bereitgestellten js/ts-Dateien suchen und eine weitere CSS-Datei im Ausgabeverzeichnis erzeugen (normalerweise in wwwroot). Werfen Sie einen Blick auf dieses Beispiel:

entry: { 
vendor: [ 
    '@angular/animations', 
    '@angular/cdk', 
    '@angular/material', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/flex-layout', 
    '@angular/forms', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router', 
    '@angular/material/prebuilt-themes/pink-bluegrey.css', 
    'es6-shim', 
    'es6-promise', 
    'event-source-polyfill', 
    'jquery', 
    'zone.js', 
    'jwt-decode' 
]} 

Hier habe ich ein Thema CSS für Winkelmaterial. Beachten Sie, dass sich die CSS im Lieferanten-JS/Ts-Bundle befindet. Der CSS-Lader extrahiert das CSS von dort und generiert eine CSS-Datei mit dem gleichen Namen des Bundles. Die generierte Datei, die im Ordner wwwroot abgelegt wird, ist diejenige, auf die Sie in Ihrer index.html verweisen werden (vorausgesetzt, es handelt sich um eine SPA-Anwendung wie in diesem Beispiel).

Natürlich können Sie einfach die CSS-Datei aus dem Ordner node_modules kopieren und in das Verzeichnis wwwroot stellen, so dass Sie sie verlinken können. Aber dieser Ansatz ist zerbrechlich, denn wenn eine andere Version des CSS verfügbar ist und Sie die aktuelle Version haben, müssen Sie die Pakete aktualisieren und die Dateien noch einmal kopieren. Also, warum nicht automatisieren?