À propos de l'utilisation et de l'installation de extract-text-webpack-plugin

Cet article présente principalement l'utilisation et l'installation de extract-text-webpack-plugin en détail. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

extract-text-webpack-plugin Ce plug-in est principalement utilisé pour extraire les styles CSS et empêcher le désordre de chargement des styles de page causé par les styles d'empaquetage dans js. Laissez-moi d'abord vous présenter la méthode d'installation de ce plug-in ; 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

Entrez d'abord dans le répertoire racine du projet, puis exécutez la commande ci-dessus pour installer le plug-in. une fois l'installation terminée, la prochaine chose que nous devons faire est d'introduire le plug-in dans 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
 ]
};

Le plug-in a trois paramètres avec les significations suivantes

1. utilisation : fait référence au type de chargeur nécessaire pour compiler le fichier. Puisque le fichier source est .css, on choisit css-loader

2. fallback : après compilation Quel chargeur est utilisé pour extraire le fichier css

3. publicfile : utilisé pour remplacer le projet ? path et générer le chemin du fichier css
   

ou supérieur. C'est tout le contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

webpack Le principe de mise en œuvre du chargement de style

Méthode de mélange du module CSS par Webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!