Webpack5入门到原理5：处理样式资源

duansamve2024-01-22 11:43

处理样式资源

我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用

官方文档找不到的话，可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档

处理 Css 资源

1. 下载包

复制代码 
npm i css-loader style-loader -D

注意：需要下载两个 loader

2. 功能介绍

  • css-loader：负责将 Css 文件编译成 Webpack 能识别的模块
  • style-loader：会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

此时样式就会以 Style 标签的形式在页面上生效

3. 配置

复制代码 
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",
};

4. 添加 Css 资源

  • src/css/index.css

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

  • src/main.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

    <!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>

    Hello Webpack5

    <script src="../dist/main.js"></script> </body> </html>

5. 运行指令

复制代码 
npx webpack

打开 index.html 页面查看效果

处理 Less 资源

1. 下载包

复制代码 
npm i less-loader -D

2. 功能介绍

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

3. 配置

复制代码 
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",
};

4. 添加 Less 资源

src/less/index.less

复制代码 
.box2 {
  width: 100px;
  height: 100px;
  background-color: deeppink;
}

src/main.js

复制代码 
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/index.css";
import "./less/index.less";

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

  • public/index.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>

    Hello Webpack5

    <script src="../dist/main.js"></script> </body> </html>

5. 运行指令

复制代码 
npx webpack

打开 index.html 页面查看效果

处理 Sass 和 Scss 资源

1. 下载包

复制代码 
npm i sass-loader sass -D

注意：需要下载两个

2. 功能介绍

  • sass-loader：负责将 Sass 文件编译成 css 文件
  • sass：sass-loader 依赖 sass 进行编译

3. 配置

复制代码 
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",
};

4. 添加 Sass 资源

  • src/sass/index.sass

    /* 可以省略大括号和分号 */
    .box3
    width: 100px
    height: 100px
    background-color: hotpink

  • src/sass/index.scss

    .box4 {
    width: 100px;
    height: 100px;
    background-color: lightpink;
    }

  • src/main.js

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

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

  • public/index.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>

    Hello Webpack5

    <script src="../dist/main.js"></script> </body> </html>

5. 运行指令

复制代码 
npx webpack

打开 index.html 页面查看效果

处理 Styl 资源

1. 下载包

复制代码 
npm i stylus-loader -D

2. 功能介绍

stylus-loader：负责将 Styl 文件编译成 Css 文件

3. 配置

复制代码 
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"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4. 添加 Styl 资源

  • src/styl/index.styl

    /* 可以省略大括号、分号、冒号 */
    .box
    width 100px
    height 100px
    background-color pink

  • src/main.js

    import { add } from "./math";
    import count from "./js/count";
    import sum from "./js/sum";
    // 引入资源，Webpack才会对其打包
    import "./css/index.css";
    import "./less/index.less";
    import "./sass/index.sass";
    import "./sass/index.scss";
    import "./styl/index.styl";

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

  • public/index.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>

    Hello Webpack5

    <script src="../dist/main.js"></script> </body> </html>

5. 运行指令

复制代码 
npx webpack

打开 index.html 页面查看效果

相关推荐
sunny_3 天前
⚡️ vite-plugin-oxc：从 Babel 到 Oxc，我为 Vite 写了一个高性能编译插件
前端·webpack·架构
用户83040713057014 天前
SPA 首屏加载速度慢怎么解决？
vue.js·webpack
codingWhat4 天前
手把手系列之—— 自定义 Loader 和 Plugin
webpack·前端工程化
2301_816997886 天前
Webpack基础
前端·webpack·node.js
凯里欧文4277 天前
极简版前端版本检测方案
前端·webpack
全马必破三10 天前
Webpack知识点汇总
前端·webpack·node.js
lcc18715 天前
Babel
webpack
光影少年16 天前
前端工程化
前端·webpack·taro
lcc18716 天前
Webpack 高级
webpack
lcc18717 天前
Eslint
webpack
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03OpenClaw + 飞书（Feishu）环境搭建指南04Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06Clawdbot部署教程：解决‘gateway token missing’授权问题的完整步骤07OpenClaw优化飞书API 额度已耗尽问题08【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆09Window 10部署openclaw报错node.exe : npm error code 12810OpenClaw大龙虾机器人完整安装教程