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

相关推荐
拾光拾趣录1 天前
Webpack 打包中的 Hash 生成机制
前端·webpack·前端工程化
abigale0311 天前
webpack+vite前端构建工具 - 8 代码分割
前端·webpack·node.js
abigale0311 天前
webpack+vite前端构建工具 - 9 webpack技巧性配置
前端·webpack·node.js
Hilaku11 天前
你以为的 tree shaking，其实根本没生效
前端·javascript·webpack
暴怒的代码13 天前
解决Vue2官网Webpack源码泄露漏洞
前端·webpack·node.js
abigale0313 天前
webpack+vite前端构建工具 -4webpack处理css & 5webpack处理资源文件
前端·css·webpack
code_YuJun13 天前
19. plugin
webpack
风吹一夏v13 天前
webpack到vite的改造之路
webpack·vue·vite
EndingCoder14 天前
性能优化中的工程化实践：从 Vite 到 Webpack 的最佳配置方案
webpack·性能优化·vite·devops·工程化实践
码蚂14 天前
Webpack打包"Conflicting order"报错解决：从mini-css-extract-plugin源码到模块化CSS实践
webpack
热门推荐
01Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面02手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！03Coze扣子平台完整体验和实践（附国内和国际版对比）04华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南05免费可用！最强AI数字人对口型神器：让照片开口说话唱歌，支持多人对口型+全身动作，1分钟学会！（附保姆级教程）06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解072024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理08C#调用WechatOCR.exe实现本地OCR文字识别09DeepSeek各版本说明与优缺点分析10Coze平台 创建AI智能体的详细步骤指南