Cs-loader and style-loader are used for webpack packaging. Let’s step by step analyze the functions of the two loaders and what they do

Creating an empty project

  • Create an empty folder called Demo, which is the project directory for our experiment
  • Go to the directory and execute itnpm init -y

Following the above two steps, we have set up the simplest project environment, then need to install the dependencies and create the source directory

  • Created in the project directorysrcsubdirectories
  • Based on webpack4 tutorial, run NPM installation required dependencies
npm i webpack@webpack-4 webpack-dev-server@version-3 webpack-cli@4 css-loader@5 style-loader@2 html-webpack-plugin@webpack-4 -D
Copy the code

createwebpack.cofnig.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [{test: /.css$/,
                use: [
                    'css-loader']]}},plugins: [
        new HtmlWebpackPlugin()
    ]
}
Copy the code

To create asrc/public.cssThe style file

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}
Copy the code

createsrc/index.jsProgram entry file

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body") [0].appendChild(div);
Copy the code

run

webpack server
Copy the code

Open the browser http://localhost:8080. The following information is displayed:

We click the browser to view the source code and find that the style content is not applied to div. The reason is that CSS-Loader only helps us to parse the code in the CSS file. By default, Webpack only parses the JS code, so to apply the style, we need to take out the parsed CSS code and add it to the style tag.

To change thesrc/index.js

// Print to the browser console and see what the imported CSS file is
import css from './public.css';

console.log(css);
Copy the code

Rerun the

It turns out that the CSS is actually a JS object. This is what CSS-Loader helps us to do at compile time

Continue to changesrc/index.jscode

// This time we will mount the CSS styles from the CSS-loader parsed JS object into the style tag of the head
import css from './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";

let body = document.getElementsByTagName("body") [0];

let style = document.createElement("style");
style.innerText = css[0] [1];

body.appendChild(style);
body.appendChild(div);
Copy the code

Run to see

We found that the style style was successfully applied to the div. We manually mounted the csS-loader to the style tag and added the style tag to the HTML document, but this is very difficult to do manually, so we have the style-loader

The introduction ofstyle-loader

If you understand what I said above, then you should already guess the style-loader function, style-loader is to help us directly after the CSS -loader parsing content to the HTML page, let’s take a look

Modify thewebpack.cofnig.jsconfiguration

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
+ 'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
}
Copy the code

Continue to changesrc/index.jscode

Remove the manual mount style

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body") [0].appendChild(div);
Copy the code

The results

We found that it was the same as the manual mount before

conclusion

  • Css-loader helps us parse CSS into JS objects
  • Sytle -loader can extract CSS styles from csS-loader parsed objects and mount them to a page