Webpack itself cannot recognize style resources, so we need to use Loader to help Webpack parse style resources. This section is about how to deal with CSS-style resources in Webpack.
Processing of CSS resources
1. Download the corresponding Loader
npm i css-loader style-loader -D
`css-loader`: Responsible for compiling Css files into modules that Webpack can recognize, that is, converting css files into js files that comply with commonJs syntax
`style-loader`: A Style tag will be created dynamically and added to the html page, where the content of the Css module in the Webpack is placed. At this time, the style will take effect on the page in the form of a Style tag.
2. Specific configuration
const path = require("path");
= {
entry: "./src/",
output: {
path: (__dirname, "dist"),
filename: "",
},
module: {
rules: [
{
// Used to match files ending with .css test: /\.css$/,
// The execution order of Loader in the use array is from right to left use: ["style-loader", "css-loader"],
},
],
},
plugins: [],
mode: "development",
};3. Specific use
For example, we use the following code to go through a complete process
- src/css/
###
css
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}
###
- src/
###
js
import count from "./js/count";
import sum from "./js/sum";
// Only when Css resources are introduced can Webpack package themimport "./css/";
(count(2, 1));
(sum(1, 2, 3, 4));
###
- public/
###
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- Prepare a style DOM container -->
<div class="box1"></div>
<!-- Introduced after packagingjsdocument，Only then can you see the effect -->
<script src="../dist/"></script>
</body>
</html>
###
With the above code file, we run the following command:
npx webpack
Then you can open the page to view the effect
Less resource processing
1. Download the corresponding Loader
npm i less-loader -D
`less-loader`: Responsible for compiling Less files into Css files
2. Specific configuration
const path = require("path");
= {
entry: "./src/",
output: {
path: (__dirname, "dist"),
filename: "",
},
module: {
rules: [
{
// Used to match files ending with .css test: /\.css$/,
// The execution order of Loader in the use array is from right to left use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
],
},
plugins: [],
mode: "development",
};3. How to use
Just like the above CSS file processing and operation method, you only need to write the corresponding Less resources, html resources, etc., then execute the following commands, and then open to view the effect.
Handle Sass and Scss resources
1. Download the corresponding Loader
npm i sass-loader sass -D
-`sass-loader`: Responsible for compiling Sass file into css file
`sas`: `sas-loader` depends on `sas` for compilation
2. Specific configuration
const path = require("path");
= {
entry: "./src/",
output: {
path: (__dirname, "dist"),
filename: "",
},
module: {
rules: [
{
// Used to match files ending with .css test: /\.css$/,
// The execution order of Loader in the use array is from right to left use: ["style-loader", "css-loader"],
},
{
test: /\.less$/,
use: ["style-loader", "css-loader", "less-loader"],
},
{
test: /\.s[ac]ss$/,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [],
mode: "development",
};The specific usage is the same as CSS and Less. Just write out the corresponding resource to run.npx webpackJust order.
This is the end of this article about the configuration details of Webpack processing style resources. For more related Webpack style resources, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!