Teilen der Webpack-Verarbeitung von Stilen

Dieser Artikel stellt hauptsächlich die Verarbeitung von Stilen per Webpack vor. Der Herausgeber findet ihn ziemlich gut. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wir können Stildateien in js einführen

require('myStyle.css')

Zu diesem Zeitpunkt müssen wir den entsprechenden Webpack-Loader einführen, der uns beim Parsen dieses Codes hilft.

CSS-Loader mit Style-Loader

Zunächst können wir CSS-Loader und Style-Loader für die Analyse von CSS vorstellen. Darunter auch CSS -loader wird zum Parsen von CSS-Dateien verwendet, Style-Loader wird zum Einbetten von CSS-Dateien in JS-Dateien verwendet

var path = require('path')
module.exports = {
 context: path.join(__dirname, 'src')
 entry: './',
 module: {
 rules: [
  {
  test: /\.css$/,
  include: [
   path.join(__dirname, 'src')
  ],
  use: ['style-loader', 'css-loader']
  }
 ]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 }
}

Im obigen Code ist die Parsingreihenfolge von rechts nach links Zum Parsen verwenden Sie zunächst den CSS-Loader, um die CSS-Datei zu analysieren, und verwenden Sie dann den Style-Loader, um sie in den JS-Code einzubetten.

Wenn Sie weniger zum Schreiben von Stilen verwenden, müssen Sie den Less-Loader verwenden, um die Stildateien in CSS-Dateien zu kompilieren, und dann weiterhin CSS-Loader und Style-Loader verwenden. Darüber hinaus kann der Loader-Loader den folgenden -Loader weglassen. Daher kann der obige Code als

module: {
 rules: [
 {
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ['style', 'css', 'less']
 }
 ]
}

abgekürzt werden. Im Allgemeinen wird diese Methode in der Testumgebung häufiger verwendet, um CSS schneller zu kompilieren, sie wird jedoch kompiliert so Die js-Datei ist relativ groß und nicht für die Verwendung in einer Produktionsumgebung geeignet.

In separate Dateien kompilieren

Der obige Ansatz verpackt CSS und JS zusammen, wodurch die Anzahl der tatsächlichen Anforderungen verringert wird. Da die kompilierte JS-Datei jedoch relativ groß ist, ist dies eine Verschwendung Bandbreite. Daher verwenden wir das Plug-In extract-text-webpack-plugin, um CSS-Dateien in unabhängige Dateien zu kompilieren. Wir können CDN verwenden, um diese Datei an den Knotenserver zu übertragen oder sie je nach Bedarf bei Bedarf zu laden, wodurch der Link zur Kundenanfrage optimiert und die Seitenantwort beschleunigt wird.

var path = require('path'),
 ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
 context: path.join(__dirname, 'src'),
 entry: './',
 module: {
 rules: [{
  test: /\.css$/,
  include: [
  path.join(__dirname, 'src')
  ],
  use: ExtractTextPlugin.extract({
  fallback: 'style',
  use: 'css'
  })
 }]
 },
 output: {
  path: path.join(__dirname, 'dist'),
  filename: '[name].bundle.[hash].js'
 },
 plugins: [
 new ExtractTextPlugin('[name].css')
 ]
}

Durch den obigen Code verwenden wir das Extract-Text-Webpack-Plugin-Plug-In, um alle CSS-Dateien im src-Verzeichnis zu verarbeiten, und verwenden zuerst das CSS-Loader-Plug-In, um den CSS-Code zu analysieren. Wenn das Parsen fehlschlägt, verwenden Sie das Style-Loader-Plug-In zum Parsen und generieren Sie schließlich die entsprechende JS-Datei im dist-Verzeichnis

Kompatibel mit alte Browser

Früher haben wir Stile geschrieben. Manchmal erfordern einige Stile unterschiedliche Präfixe für verschiedene Browser, wie zum Beispiel -webkit-. Da wir nun über das Build-Tool verfügen, müssen wir nicht mehr auf diese Präfixe achten. Das Build-Tool fügt diese Präfixe automatisch für uns hinzu.

Für Webpack denken wir natürlich, dass wir einen Loader oder ein Plugin verwenden müssen, um diese Dinge zu tun. Nach der Überprüfung haben wir festgestellt, dass der Autoprefixer-Loader nicht mehr verwendet wird posscss

postcss wird verwendet für Das JS-Plug-In, das CSS-Stile in JS konvertiert, muss mit anderen Plug-Ins verwendet werden. Dies ist nur ein Konverter selbst und stellt keinen Code bereit Parsing-Funktion.

Hier benötigen wir das Autoprefixer-Plugin, um Präfixe zu unseren Stilen hinzuzufügen. Laden Sie zunächst das Modul herunter.

npm install -D autoprefixer

Dann können Sie Webpack konfigurieren

var autoprefixer = require('autoprefixer')
module.exports = {
 ...
 module: {
 loaders: [
  ...
  {
  {
   test: /\.css$/,
   loader: ExtractTextPlugin.extract(["css", "postcss"])
  },
  }
 ]
 },
 postcss: [autoprefixer()],
 ...
}

Überprüfen Sie die extrahierte Style-Datei. Das finden Sie Das Präfix

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex
}

wurde hinzugefügt. Darüber hinaus kann Autoprefixer je nach Zielbrowserversion auch unterschiedliche Präfixnummern generieren Ihre Anwendung ist groß. Die meisten von ihnen verwenden relativ neue Browserversionen, sodass Sie Folgendes konfigurieren können.

postcss: [autoprefixer({ browsers: ['last 2 version'] })] Der generierte Stil wird etwas anders sein, oder das obige Beispiel

a {
 display: flex;
}
/*compiles to:*/
a {
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

Stilkomprimierung

Um den Code zu komprimieren, können wir das integrierte Plug-in UglifyJsPlugin des Webpacks verwenden, das sowohl JS-Code als auch CSS-Code komprimieren kann.

plugins: [
 ...
 new webpack.optimize.UglifyJsPlugin({
 compress: {
  warnings: false
 }
 }),
 ...
]

Tatsächlich kann man nicht sagen, dass es sich um eine Komprimierung des CSS-Codes handelt. Im Wesentlichen handelt es sich um eine Komprimierung des JS-Codes und die anschließende Ausgabe dieses Codes an das CSS Datei.

Verwenden Sie CommonsChunkPlugin, um allgemeinen Code zu extrahieren

Zunächst muss klar sein, dass CommonsChunkPlugin verwendet wird, wenn mehrere Einträge vorhanden sind, dh wenn mehrere Einträge vorhanden sind Dateien, diese Eintragsdateien Möglicherweise gibt es einige gemeinsame Codes, und wir können diese gemeinsamen Codes in unabhängige Dateien extrahieren. Es ist sehr wichtig, dies zu verstehen. (Es hat leider lange gedauert, bis ich etwas verstanden habe~~~~)

Wenn dieselbe CSS-Datei in mehreren Einträgen erforderlich ist, können wir CommonsChunkPlugin verwenden, um diese gemeinsamen Stildateien in unabhängige Stildateien zu extrahieren.

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js"
 }),
 ...
 ]
}

Natürlich wird hier nicht nur allgemeines CSS extrahiert, sondern wenn es allgemeinen JS-Code gibt, wird dieser auch in commons.js extrahiert. Hier gibt es ein interessantes Phänomen. Der Name der extrahierten CSS-Datei ist der Wert von name im Parameter, und der Name der js-Datei ist der Wert von filename.

CommonsChunkPlugin scheint nur Module zu extrahieren, die allen Chunks gemeinsam sind. Wenn die folgenden Abhängigkeiten bestehen

// entry1.js
var style1 = require('./style/myStyle.css')
var style2 = require('./style/style.css')

// entry2.js
require("./style/myStyle.css")
require("./style/myStyle2.css")

// entry3.js
require("./style/myStyle2.css")

, werden Sie nach der Verwendung des Plugs feststellen -in, Die Datei commons.css wird überhaupt nicht generiert.

Wenn wir nur den gemeinsamen Code der ersten beiden Blöcke verwenden müssen, können wir dies tun

module.exports = {
 entry: {
 "A": "./src/entry.js",
 "B": "./src/entry2.js",
 "C": "./src/entry3.js"
 },
 ...
 plugins: [
 new webpack.optimize.CommonsChunkPlugin({
 name: "commons", filename: "commons.js", chunks: ['A', 'B']
 }),
 ...
 ]
}

Verwandte Empfehlungen:

So verwenden Sie externe Elemente von Webpack

So verwenden Sie Webpack zur Optimierung von Ressourcenmethoden und -techniken

Optimierung der Webpack-Leistung

Das obige ist der detaillierte Inhalt vonTeilen der Webpack-Verarbeitung von Stilen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!