So extrahieren Sie CSS-Stile im Webpack

Dieses Mal zeige ich Ihnen, wie Sie CSS-Stile im Webpack extrahieren und welche Vorsichtsmaßnahmen beim Extrahieren von CSS-Stilen im Webpack gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

npm install extract-text-webpack-plugin --save-dev
# for webpack 2
npm install --save-dev extract-text-webpack-plugin
# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

Geben Sie zuerst das Stammverzeichnis des Projekts ein und führen Sie dann den obigen Befehl aus, um das Plug-In zu installieren. Nachdem die Plug-In-Installation abgeschlossen ist, müssen wir als Nächstes das Plug-In einführen -in in webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
     fallback: "style-loader",
     use: "css-loader"
    })
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin("styles.css"),
 ]
}

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Create multiple instances 
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
module.exports = {
 module: {
  rules: [
   {
    test: /\.css$/,
    use: extractCSS.extract([ 'css-loader', 'postcss-loader' ])
   },
   {
    test: /\.less$/i,
    use: extractLESS.extract([ 'css-loader', 'less-loader' ])
   },
  ]
 },
 plugins: [
  extractCSS,
  extractLESS
 ]
};

Das Plug-in hat drei Parameter mit der folgenden Bedeutung:

1. Verwendung: bezieht sich darauf, welche Art von Loader benötigt wird Kompilieren Sie die Datei. Da die Quelldatei .css ist, wählen wir CSS-Loader

2. Fallback: Welcher Loader wird zum Extrahieren der CSS-Datei nach der Kompilierung verwendet

3. publicfile: wird verwendet, um den Projektpfad zu überschreiben und den Dateipfad der CSS-Datei zu generieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So passen Sie den Inhalt von ElTableColumn an

Kehren Sie nach der Entwicklung eines kleinen Programms zur Startseite zurück und die Seite teilen

Das obige ist der detaillierte Inhalt vonSo extrahieren Sie CSS-Stile im Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!