Webpack中如何处理样式资源？

杜同学。

已于 2023-04-15 09:54:34 修改

阅读量6.1k

点赞数 1

文章标签： webpack 前端 javascript

于 2023-04-15 09:50:29 首次发布

本文链接：https://blog.csdn.net/weixin_44384728/article/details/130165839

版权

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。我们本节就是要讲述Webpack中如何处理CSS样式资源。

###CSS资源的处理

1.下载对应的Loader

npm i css-loader style-loader -D

`css-loader`：负责将 Css 文件编译成 Webpack 能识别的模块,也就是将css文件转化为符合commonJs语法的js文件

`style-loader`：会动态创建一个 Style 标签添加到html页面上，里面放置 Webpack 中 Css 模块内容，此时样式就会以 Style 标签的形式在页面上生效

2.具体配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.具体使用

例如我们使用如下代码走一个完整的流程

- src/css/index.css

###
css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}
###

- src/main.js

###
js
import count from "./js/count";
import sum from "./js/sum";
// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
###

- public/index.html
###
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>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>
###

有了如上代码文件后，我们运行以下指令：

npx webpack

然后就可以打开 index.html 页面查看效果

###less资源的处理

1.下载对应的Loader

npm i less-loader -D

`less-loader`：负责将 Less 文件编译成 Css 文件

2.具体配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

3.如何使用

和上述CSS文件的处理运行方式一样，只需要写好对应的Less资源、html资源等，然后执行如下指令，再打开index.html查看效果即可

###处理 Sass 和 Scss 资源

1.下载对应的Loader

npm i sass-loader sass -D

-`sass-loader`：负责将 Sass 文件编译成 css 文件

`sass`：`sass-loader` 依赖 `sass` 进行编译

2.具体配置

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        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",
};

具体使用和CSS、Less使用方式相同，只需写出对应资源运行 npx webpack 命令即可。