Wie soll Webpack mit Stilen umgehen?

Dieser Artikel stellt hauptsächlich die Verarbeitung von Stilen durch Webpack vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Dieser Artikel stellt die Verarbeitung von Stilen durch Webpack vor und teilt sie mit allen. Die Details sind wie folgt:

Wir können Stildateien in js einführen

require('myStyle.css')

Zu diesem Zeitpunkt Wir müssen 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 erfolgt die Parsing-Reihenfolge von rechts nach links. Verwenden Sie zuerst den CSS-Loader zum Parsen Verwenden Sie anschließend den Style-Loader, um die CSS-Datei 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, aber die auf diese Weise kompilierte JS-Datei ist relativ groß. was nicht für die Produktionsumgebung geeignet ist.

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 sie verschwendet 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')
 ]
}

Mit dem obigen Code verwenden wir das Plug-In „Extract-Text-Webpack-Plugin“, um alle CSS-Dateien im src-Verzeichnis zu verarbeiten. Verwenden Sie zunächst das Plug-In „CSS-Loader“, um das CSS zu analysieren Wenn das Parsen fehlschlägt, verwenden Sie den Style-Loader. Das Plug-in analysiert und generiert schließlich die entsprechende js-Datei im dist-Verzeichnis

Kompatibel mit alten Browsern

Wann Früher haben wir Stile geschrieben. Einige Stile erforderten das Hinzufügen eines Präfixes in verschiedenen Browsern, z. B. -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 und bietet keine Code-Analyse 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 das Webpack konfigurieren

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

Überprüfen Sie die extrahierte Stildatei und Sie werden feststellen, dass das Präfix hinzugefügt wurde

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

Darüber hinaus kann auch der Autoprefixer entsprechend verwendet werden Wenn die meisten Benutzer Ihrer Anwendung beispielsweise eine neuere Version des Browsers verwenden, können Sie diese wie folgt konfigurieren.

postcss: [autoprefixer({ browsers: ['last 2versions'] })] Der generierte Stil wird etwas anders sein, es ist immer noch der obige Beispielstil

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

Komprimieren

Um den Code zu komprimieren, können wir das integrierte Plug-in UglifyJsPlugin von Webpack 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 wird der JS-Code komprimiert und dieser Code dann in die CSS-Datei ausgegeben.

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")

Nach der Verwendung des Plug-Ins werden Sie feststellen, dass dies bei der Datei commons.css nicht der Fall ist überhaupt erzeugt.

Wenn wir nur den gemeinsamen Code der ersten beiden Blöcke benötigen, 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']
 }),
 ...
 ]
}

Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird für alle hilfreich sein die Zukunft.

Verwandte Artikel:

Über das child_process-Modul in Node (ausführliches Tutorial)

Was sind die Anwendungen von untergeordneten Prozessen in Node. js-Szenario

Detaillierte Interpretation des Dateisystems und des Flusses in nodeJs

Das obige ist der detaillierte Inhalt vonWie soll Webpack mit Stilen umgehen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!