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 it
npm 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 directory
src
subdirectories - 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.css
The style file
.rect{
background-color: red;
width: 100px;
height: 100px;
}
Copy the code
createsrc/index.js
Program 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.js
code
// 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.js
configuration
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.js
code
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