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

相关推荐
qp1 天前
21.OpenCV获取图像轮廓信息
javascript·opencv·webpack
随笔记1 天前
vite构建工具和webpack构建工具有什么共同点和不同处
vue.js·react.js·webpack
疾风铸境2 天前
Qt5.14.2+mingw64编译OpenCV3.4.14一次成功记录
前端·webpack·node.js
try again！2 天前
rollup.js 和 webpack
开发语言·javascript·webpack
依旧7052 天前
webpack打包流程
webpack
ak啊2 天前
Webpack打包过程中的核心机制-Chunk 的生成与优化
前端·webpack·源码
挖稀泥的工人2 天前
面试看这一篇webpack
前端·webpack
雾散尽时2 天前
Webpack在项目中的配置与工作原理解析
webpack
程序员黄同学3 天前
解释 Webpack 中的模块打包机制，如何配置 Webpack 进行项目构建？
前端·webpack·node.js
jndingxin3 天前
OpenCV 图形API（5）API参考：数学运算用于执行图像或矩阵加法操作的函数add()
opencv·webpack·矩阵
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】