Home Backend Development PHP Tutorial About the use and installation of extract-text-webpack-plugin

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

Jun 12, 2018 am 11:02 AM
extract plugin text webpack

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
Copy after login

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"),
 ]
}
Copy after login

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
 ]
};
Copy after login

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

VUE3 Getting Started Tutorial: Packaging and Building with Webpack VUE3 Getting Started Tutorial: Packaging and Building with Webpack Jun 15, 2023 pm 06:17 PM

VUE3 Getting Started Tutorial: Packaging and Building with Webpack

How to assign array key values ​​to variables using extract function in PHP How to assign array key values ​​to variables using extract function in PHP Jun 26, 2023 pm 03:44 PM

How to assign array key values ​​to variables using extract function in PHP

What is the difference between vite and webpack What is the difference between vite and webpack Jan 11, 2023 pm 02:55 PM

What is the difference between vite and webpack

How to use PHP and webpack for modular development How to use PHP and webpack for modular development May 11, 2023 pm 03:52 PM

How to use PHP and webpack for modular development

What files can vue webpack package? What files can vue webpack package? Dec 20, 2022 pm 07:44 PM

What files can vue webpack package?

What is Webpack? Detailed explanation of how it works? What is Webpack? Detailed explanation of how it works? Oct 13, 2022 pm 07:36 PM

What is Webpack? Detailed explanation of how it works?

What folder is plugin? What folder is plugin? May 05, 2023 pm 02:53 PM

What folder is plugin?

How does webpack convert es6 to es5 module? How does webpack convert es6 to es5 module? Oct 18, 2022 pm 03:48 PM

How does webpack convert es6 to es5 module?

See all articles