Vorwort: Webpack-Verarbeitungs-CSS ist ein sehr grundlegendes Thema. Es ist nur so, dass es in Webpack4 bei der Verwendung von Autoprefixer zur Lösung der CSS-Browserkompatibilität eine andere Gefahr gibt als zuvor. Deshalb werde ich ausführlich über dieses Wissen schreiben.
1. Erforderliche Abhängigkeiten
- style-loader: CSS-Dateien in das Style-Tag der HTML-Seite einfügen. Referenz: https://www.webpackjs.com/loa...
- css-loader: Analysiert in js importierte CSS-Dateien. Referenz: https://www.webpackjs.com/loa...
- less-loader: analysiert die CSS-Vorverarbeitungssprache. Wenn Sie andere Vorverarbeitungssprachen verwenden, müssen Sie den entsprechenden Loader verwenden. Referenz: https://www.html.cn/doc/webpa...
-
postcss-loader: Verarbeiten Sie das CSS, das wir im Projekt geschrieben haben, nach:
- Parsen Sie das CSS in eine Abstraktion, die von bedient werden kann Struktur des JavaScript-Syntaxbaums (Abstract Syntax Tree, AST),
- Rufen Sie das Plug-in auf, um den AST zu verarbeiten und das Ergebnis zu erhalten.
- Autoprefixer: Ein Plug-in für PostCSS-Loader, das CSS voranstellt, um es an verschiedene Browser anzupassen.
Hinweis: Der Postcss-Loader funktioniert wie ein Film- und Fernseh-Postproduktionsprozess. Er kombiniert alle Originaldateien, fügt dann mithilfe von Plug-Ins Spezialeffekte hinzu und gibt schließlich das fertige Produkt aus. Das Autoprefixer-Plug-in führt eine Nachbearbeitung des vom Postcss-Loader analysierten AST durch. Zweitens: Installieren Sie Abhängigkeiten importLoaders: 1 des CSS-Loaders ist eine sehr wichtige Einstellung. Dadurch wird das gesamte analysierte CSS nur in ein einziges Style-Tag eingefügt. Ohne diese Konfiguration wird bei jeder neuen CSS-Datei ein neues Style-Tag erstellt. Bei einigen Browsern ist die Anzahl der Style-Tags begrenzt.
Sechstens erstellen Sie die Postcss-Konfigurationsdatei postcss.config.js und fügen das Autoprefixer-Plug-in darin ein.
npm install --save-dev less-loader less style-loader css-loader postcss-loader autoprefixer
Siebentens fügen Sie die Browserliste browserslist in package.json hinzu. Dies ist die im Vorwort erwähnte Gefahr, sonst funktioniert der Autoprefixer nicht Tutorial
"