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 页面查看效果

相关推荐
weixin_427771612 天前
Vite 与 Webpack 模块解析差异
前端·webpack·node.js
鲨莎分不晴2 天前
【实战】老项目焕发新生：从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js
迦南giser3 天前
webpack从0到1详解
前端·javascript·css·webpack·node.js
C_心欲无痕3 天前
构建工具中的 hash 与 contenthash作用：以 Webpack 和 Vite 为例
算法·webpack·哈希算法
m0_741412245 天前
Webpack:F:\nochinese_path\React_code\webpack
前端·react.js·webpack
烟锁池塘柳05 天前
C++程序脱离环境运行：详解OpenCV动态库依赖部署 (Deployment)
c++·opencv·webpack
前端大波6 天前
使用webpack-bundle-analyzer 对 react 老项目进行打包优化
前端·react.js·webpack·性能优化
遗憾随她而去.7 天前
Webpack 面试题
前端·webpack·node.js
为了摸鱼而战8 天前
从10分钟到30秒！Webpack 打包效率优化实战指南
webpack·性能优化
黎明初时11 天前
React基础框架搭建8-axios封装与未封装，实现 API 请求管理：react+router+redux+axios+Tailwind+webpack
javascript·react.js·webpack
热门推荐
01GitHub 镜像站点022025 Telegram 最新免费社工库机器人（LetsTG可[特殊字符]）搭建指南（含 Python 脚本）03OpenCode 入门教程：介绍 · 安装 · 配置第三方 API (如 Claude)04Linux下V2Ray安装配置指南05Labelme从安装到标注：零基础完整指南06AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南07UV安装并设置国内源08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Claude Code Skills 实用使用手册10BongoCat - 跨平台键盘猫动画工具