Informationen zur Verwendung und Installation des Extract-Text-Webpack-Plugins

不言
Freigeben: 2023-03-31 17:58:02
Original
1641 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Verwendung und Installation des Extract-Text-Webpack-Plugins ausführlich vorgestellt. Der Inhalt ist ziemlich gut und wird als Referenz dienen.

Extract-Text-Webpack-Plugin Dieses Plug-In wird hauptsächlich zum Extrahieren von CSS-Stilen und zur Verhinderung von Störungen beim Laden von Seitenstilen verwendet, die durch Verpackungsstile in JS verursacht werden. Lassen Sie mich zunächst die Installationsmethode dieses Plug-Ins vorstellen. in. :

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
Nach dem Login kopieren

Geben Sie zuerst das Stammverzeichnis des Projekts ein und führen Sie dann den obigen Befehl aus, um das Plug-In zu installieren Wenn es fertig ist, müssen wir es als nächstes im Webpack installieren. Das Plug-in wird in .config.js eingeführt

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"),
 ]
}
Nach dem Login kopieren

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
 ]
};
Nach dem Login kopieren

Das Plug-in hat drei Parameter mit der folgenden Bedeutung

  1. Verwendung: Bezieht sich auf die Art von Loader, die zum Kompilieren der Datei benötigt wird. Da die Quelldatei .css ist, haben wir Wählen Sie den CSS-Loader

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

  3. öffentliche Datei: Wird zum Überschreiben des Projektpfads und zum Generieren verwendet Der Dateipfad der CSS-Datei

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie hier zur chinesischen PHP-Website!

Verwandte Empfehlungen:

Webpack Das Implementierungsprinzip des Stilladens

Webpacks Methode zum Mischen von CSS-Modulen

Das obige ist der detaillierte Inhalt vonInformationen zur Verwendung und Installation des Extract-Text-Webpack-Plugins. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage