Webpack lädt CSS-Dateien und ihre Konfigurationsmethode

webpack lädt CSS-Dateien und deren Konfiguration

• Wenn wir nach dem Schreiben mehrerer CSS-Dateien in HTML auf diese verweisen möchten, besteht unsere erste Methode darin, die CSS-Dateien über das Link-Tag zu importieren. Wenn wir jedoch viele CSS-Dateien haben, ist es nicht empfehlenswert, sie einzeln zu importieren. Nachdem wir nun Webpack kennengelernt haben, hoffen wir, alle abhängigen Dateien durch Verpacken der Datei bundle.js importieren zu können.
• Was wir wissen müssen, ist, dass, wenn die CSS-Datei nicht in die main.js-Datei der Einstiegsfunktion importiert wird, die gepackte Datei bundle.js definitiv keine CSS-Datei hat. Daher müssen wir die main.js-Datei von der CSS-Datei abhängig machen.
• Verwenden Sie den Code: require('css-Dateiadresse')
• Nachdem die Abhängigkeiten abgeschlossen sind, verpacken wir es erneut und führen npm run build aus. Dabei finden wir einen Fehler. Der Fehler lautet: Sie benötigen möglicherweise einen geeigneten Loader, um diesen Dateityp zu verarbeiten. Dies bedeutet, dass Sie möglicherweise einen geeigneten Loader benötigen, um diese Datei zu verarbeiten.
• Also haben wir die chinesische Website von Webpack geöffnet und die beiden Loader gefunden, die wir installieren müssen: CSS-Loader und Style-Loader. Und wir müssen diese Loader auch in der Datei webpack.config.js konfigurieren
• Wir verwenden also npm, um diese beiden Abhängigkeiten herunterzuladen. Der Code lautet wie folgt: npm install css-loader style-loader --save-dev
• In der Datei webpack.config.js gibt es eine Moduleigenschaft, die ein Objekt ist. In diesem Objekt gibt es eine Regeleigenschaft, die ein Array ist. Jedes Element im Array ist ein Objekt, das zur Verarbeitung verschiedener Dateilader erforderlich ist. Der Code lautet wie folgt:

const path = require('Pfad');
    modul.exporte = {
        // Geben Sie in der Konfigurationsdatei manuell die Eintragsdatei und den Exportdateimodus an: „Entwicklung“, // Dieses Attribut muss in der Version von webpack4.x hinzugefügt werden: „./src/main.js“, // Eintragsdateiausgabe: { // Exportdateipfad: path.resolve(__dirname, „dist“), // Geben Sie an, wo die gepackten Dateien ausgegeben werden sollen (Hinweis: Der Pfad muss eine absolute Adresse sein)
            filename: 'bundle.js' //Geben Sie den Dateinamen der Ausgabedatei an},
        Modul:{
            Regeln:[
            {test:/\.css$/ , verwenden:['style-loader' , 'css-loader']}
            ]
        }
    }

Der Test gibt an, welchen Dateityp wir verarbeiten möchten, und jedes verwendete Element ist der Loader, der zur Verarbeitung dieses Dateityps erforderlich ist.

Hinweis: Der CSS-Loader wird verwendet, um die CSS-Datei aus der Datei main.js zu laden, während der Style-Loader verwendet wird, um die Exporte des Moduls als Stile zum DOM hinzuzufügen. Hier haben manche vielleicht Fragen: Laut dieser Funktion soll die Datei zuerst geladen und dann als Stil zum DOM hinzugefügt werden, daher darf die Reihenfolge im Array nicht so sein. Ich möchte Ihnen hiermit klar sagen, dass Ihre Idee nicht falsch ist, aber webpack ist insofern sehr eigenartig, als es den Loader vom letzten Element des Arrays lädt, von rechts nach links.

Nachdem wir die Abhängigkeit festgelegt, den Loader heruntergeladen und konfiguriert haben, werden wir feststellen, dass die Stile in der CSS-Datei nach dem Ausführen angezeigt werden.

Zusammenfassen

Oben sehen Sie die vom Editor eingeführte Webpack-Lade-CSS-Datei und ihre Konfigurationsmethode. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! Wenn Sie diesen Artikel hilfreich finden, können Sie ihn gerne abdrucken und dabei bitte die Quelle angeben. Vielen Dank!