Comment extraire les styles CSS dans Webpack

Cette fois, je vais vous montrer comment extraire les styles CSS dans webpack, et quelles sont les précautions à prendre pour extraire les styles CSS dans webpack. Ce qui suit est un cas pratique, jetons un coup d'œil.

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 du plug-in terminée, la prochaine chose que nous devons faire est de l'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 à quel type de chargeur est nécessaire pour compiler le fichier. Ici, parce que le fichier source est .css, choisissez donc css-loader

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

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

Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment personnaliser le contenu d'ElTableColumn

Retourner à la page d'accueil après avoir développé un petit programme et partage de la page

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!