Perfekte Lösung für das Problem des CSS-Hintergrundbildpfads im Webpack

Innerhalb des Style-Tags der Vue-Komponente befindet sich der folgende CSS-Code, der das Hintergrundbild verwendet:

Hintergrundbild: URL("../assets/img/icon_add.png");

Die Parsing-Konfiguration des CSS-Loaders in Webpack ist wie folgt

{
        Test: /\.(css|less)$/,
        ausschließen: Pfad.auflösen(__dirname, 'node_modules'),
        verwenden: ['Style-Loader', 'CSS-Loader', 'Less-Loader']
    }

Nach dem Verpacken wurde keine CSS-Datei im Dist-Verzeichnis gefunden. Dies liegt daran, dass die CSS-Datei in eine JS-Datei umgewandelt wird.

Wenn Sie das Projekt zu diesem Zeitpunkt starten, wird das Hintergrundbild korrekt importiert und kann normal angezeigt werden.

2 Extrahieren Sie die CSS-Dateien in ein separates Dateiverzeichnis

Verwenden Sie das Mini-CSS-Extract-Plugin, um die CSS-Dateien separat in das CSS-Verzeichnis unter dem Dist-Verzeichnis zu extrahieren.

2.1 Loader-Konfiguration

{
        Test: /\.(css|less)$/,
        ausschließen: Pfad.auflösen(__dirname, 'node_modules'),
        verwenden: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
    }

2.2 Plugin-Konfiguration

neues MiniCssExtractPlugin({
            Dateiname: 'css/[name][contenthash].css',
        })

Nach dem Verpacken sieht die Verzeichnisstruktur von dist wie folgt aus:

Sie können sehen, dass sich das Bild im Stammverzeichnis (dist) befindet, die CSS-Datei jedoch im Verzeichnis „dist/css/“. Sehen wir uns nun an, wie die gepackte CSS-Datei auf den Bildpfad verweist.

2.3 Verpackungsergebnisse

Hintergrundbild: URL (bb65a86a2fe7669e483a56b970bea421.png);

Sie können sehen, dass im Verzeichnis „dist/css“ kein Bild „bb65a86a2fe7669e483a56b970bea421.png“ vorhanden ist. Daher kann das Bild nicht richtig angezeigt werden. Die ideale Situation ist

Hintergrundbild: URL (../bb65a86a2fe7669e483a56b970bea421.png);

3 Lösungen

Ändern Sie die Loader-Konfiguration wie folgt

{
        Lader: MiniCssExtractPlugin.loader,
        Optionen:
            // Der relative Pfad der aktuellen CSS-Datei relativ zum gepackten Stammpfad dist publicPath: '../'
        }
    }, 'CSS-Lader', 'Weniger-Lader'

Zusammenfassen

Das Trennen von CSS-Dateien führt zu CSS-Hintergrundbildpfadfehlern. Der Kern der Lösung besteht darin, den Wert von publicPath zu konfigurieren. Der Wert von publicPath ist der relative Pfadwert des Dateiverzeichnisses, in dem sich die CSS-Datei relativ zum Stammverzeichnis befindet. Beispielsweise ist der Stammpfad /, das Verzeichnis, in dem sich die CSS-Datei befindet, ist /css/, der relative Pfad ist also …

Unerwartete Probleme

Warum werden CSS-Dateien nach dem Webpack-Verpacken in die Datei bundle.js eingemischt, Bilder jedoch nicht in bundle.js? ? ?

Dies ist das Ende dieses Artikels über die perfekte Lösung für das Problem des CSS-Hintergrundbildpfads von Webpack-Verpackungen. Weitere relevante Inhalte zum CSS-Hintergrundbildpfad von Webpack-Verpackungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!