Lassen Sie uns darüber sprechen, wie Webpack4 mit CSS umgeht

Webpack4-Verarbeitungs-CSS

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

"

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie Webpack4 mit CSS umgeht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!