About the use and installation of extract-text-webpack-plugin

This article mainly introduces the use and installation of extract-text-webpack-plugin in detail. The content is quite good. I will share it with you now and give it as a reference.

extract-text-webpack-plugin The main purpose of this plug-in is to extract the css style and prevent the page style loading disorder caused by packaging the style in js; first, let me introduce the installation method of this plug-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

First enter the root directory of the project, and then execute the above command to install the plug-in. After the plug-in installation is completed, the next thing we have to do is to install it in webpack Introduce the plug-in into .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
 ]
};

The plug-in has three parameters with the following meanings

1. use: Refers to what kind of loader is needed to compile the file. Since the source file is .css, we choose css-loader

2. fallback: What loader is used to extract css after compilation File

3. publicfile: used to overwrite the project path and generate the file path of the css file
   

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

webpack The implementation principle of style loading

Webpack’s method of mixing css module

The above is the detailed content of About the use and installation of extract-text-webpack-plugin. For more information, please follow other related articles on the PHP Chinese website!