当前位置： 首页 > news >正文

Webpack开发模式及处理样式资源

news 文章来源：https://blog.csdn.net/qq_45569925/article/details/144209150 2025/5/6 23:35:56

一、开发模式介绍

开发模式顾名思义就是我们开发代码时使用的模式。

这个模式下我们主要做两件事：

  1. 编译代码，使浏览器能识别运行

    • 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源

  2. 代码质量检查，树立代码规范

    • 提前检查代码的一些隐患，让代码运行时能更加健壮。

    • 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

二、处理样式资源

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

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

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

Loaders | webpack 中文文档 (docschina.org)icon-default.png?t=O83Ahttps://webpack.docschina.org/loaders/

2.1 处理CSS资源

2.1.1 下载包

yarn add css-loader style-loader -D

注意：需要下载两个loader。 

2.1.2 功能介绍

👉 css-loader：负责将CSS文件编译成Webpack能识别的模块。

👉 style-loader：会动态创建一个Style标签，里面放置webpack中css模块内容。

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

2.1.3 配置 -- webpack.config.js

const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}

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

2.1.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.2 处理Less资源

2.2.1 下载包

yarn add less less-loader -D

2.2.2 功能介绍

👉 less-loader：负责将Less文件编译成CSS文件。

2.2.3 配置 -- webpack.config.js

const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},// less样式{test: /\.less$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'less-loader',// 将less文件编译成css文件]}]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}

2.2.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><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><script src="../dist/main.js"></script></body>
</html>

2.2.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.3 处理Sass和Scss资源

2.3.1 下载包

yarn add sass sass-loader -D

2.3.2 功能介绍

👉 sass-loader：负责将Sass文件编译成CSS文件。

👉 sass：sass-loader 依赖 sass进行编译。

2.3.3 配置 -- webpack.config.js

const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},// less样式{test: /\.less$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'less-loader',// 将less文件编译成css文件]},// sass样式{test: /\.s[ac]ss$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'sass-loader',// 将sass文件编译成css文件]}]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}

2.3.4 添加Sass资源

👉 src/sass/index.sass

/* 可以省略大括号和分号，但是冒号后边一定要跟空格，否则背景色不生效 */
.box3width: 100pxheight: 100pxbackground-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><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><script src="../dist/main.js"></script></body>
</html>

2.3.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

2.4 处理Styl资源

2.4.1 下载包

yarn add stylus stylus-loader -D

2.4.2 功能介绍

👉 stylus-loader：负责将Styl文件编译成CSS文件。

2.4.3 配置 -- webpack.config.js

const path = require("path");module.exports = {// 入口【相对路径】entry: './src/main.js',// 输出output: {// 文件的输出路径【绝对路径】// __dirname 当前文件的文件夹的绝对路径path: path.resolve(__dirname, 'dist'),// 文件的输出名称filename: 'main.js'},// 加载器module: {rules: [// loader 的配置// css样式{test: /\.css$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中]},// less样式{test: /\.less$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'less-loader',// 将less文件编译成css文件]},// sass样式{test: /\.s[ac]ss$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'sass-loader',// 将sass文件编译成css文件]},// stylus样式{test: /\.styl$/i,// 只检测.css文件use: [// 执行顺序：从右到左，从下到上'style-loader',// 将js中css通过创建style标签添加到html文件中生效'css-loader',// 将css资源编译成commonjs的模块到js中'stylus-loader',// 将Styl文件编译成css文件]}]},// 插件plugins: [// plugin的配置],/* 模式：开发模式：development生产模式：production*/mode: "development"
}

2.4.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><h1>Hello Webpack5</h1><!-- 准备一个使用样式的 DOM 容器 --><div class="box1"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div><div class="box5"></div><script src="../dist/main.js"></script></body>
</html>

2.4.5 运行指令

运行以下命令之后，可以打开index.html页面查看效果。

npx webpack

最后一个webpack.config.js配置文件中的代码，包括了上述所有样式资源处理的配置。

相关文章：

Webpack开发模式及处理样式资源

一、开发模式介绍 开发模式顾名思义就是我们开发代码时使用的模式。 这个模式下我们主要做两件事&#xff1a; 编译代码&#xff0c;使浏览器能识别运行 开发时我们有样式资源、字体图标、图片资源、html 资源等&#xff0c;webpack 默认都不能处理这些资源&#xff0c;所以我…...

编程日记 2024/12/5 21:10:02

leetcode--设计链表

707.设计链表 你可以选择使用单链表或者双链表&#xff0c;设计并实现自己的链表。 单链表中的节点应该具备两个属性&#xff1a;val 和 next 。val 是当前节点的值&#xff0c;next 是指向下一个节点的指针/引用。 如果是双向链表&#xff0c;则还需要属性 prev 以指示链表中的…...

编程日记 2024/12/5 21:09:01

【MySQL】：数据库操作

MySQL 数据库基础理论 2.1 数据库系统概述 介绍数据库系统的基本概念、发展历程、分类及 MySQL 在其中的地位与特点。 2.2 MySQL 数据库体系结构 解析 MySQL 的整体架构&#xff0c;包括服务器层与存储引擎层的功能与交互机制&#xff0c;重点探讨 InnoDB、MyISAM 等存…...

编程日记 2024/12/5 21:04:57

刷蓝桥杯历年考题(更新至15届~)

第十五届 CA组省赛 AcWing5980.训练士兵 方法一&#xff1a;树状数组:O(nlogn) self-complete /*先枚举组团&#xff0c;后分析每个士兵&#xff0c;有一个特点&#xff0c;组团费用是固定的&#xff0c;那当然是让所有士兵一块训练&#xff0c;训练完的士兵也不会有损失当还…...

编程日记 2024/12/5 21:02:55

AI与BI的火花：大语言模型如何重塑商业智能的未来

大家好&#xff0c;我是独孤风。 在当今这个数据驱动的时代&#xff0c;企业对于信息的需求如同对于氧气的需求一般至关重要。商业智能&#xff08;BI&#xff09;作为企业获取、分析和呈现数据的关键工具&#xff0c;正在经历一场深刻的变革&#xff0c;而这一变革的催化剂正是…...

编程日记 2024/12/5 21:00:53

Qt 详解QtNFC 读写模式

文章目录 Qt NFC 读写模式详解1. NFC 读写模式简介1.1 什么是 NFC 读写模式&#xff1f;主要功能&#xff1a; 1.2 常见应用场景 2. Qt NFC 读写模式原理3. 配置 QtNFC 模块4. NFC 读写操作实现4.1 NFC 标签读取代码示例功能解析 4.2 NFC 标签写入代码示例功能解析 5. 使用注意…...

编程日记 2024/12/5 20:59:52

增删改查文档

列表 : 列表包含 : 模糊查找 分页 列表jsp页面 : 一 :导入外部文件 (举例 : 用户点进来就可以看到菜单,这是预加载属于,使用文档就绪函数实现) 二 : body 上 ① : 文档就绪函数 ${ function() //获取条件查询的字段 //组装对象 //调用文档就绪函数 } ② : 封装ajax方…...

编程日记 2024/12/5 20:55:48

C语言蓝桥杯2023年省赛真题

文章目录 持续更新中...第一题题目描述输入格式输出格式样例输出提示 2 第二题题目描述 第三题题目描述输入格式输出格式样例输入样例输出 第四题题目描述输入格式输出格式样例输入样例输出提示 第四题题目描述输入格式输出格式样例输入样例输出提示 第五题题目描述输入格式输出…...

编程日记 2024/12/5 20:53:42

Python迭代器-大数据量的处理

一 生成器的实际使用&#xff08;大量数据的导出&#xff09; #分批导出数据然后分批写入excel import pandas as pd import openpyxl from openpyxl.utils.dataframe import dataframe_to_rowsdef execute_query(query):# 假设这是执行 SQL 查询的函数# 返回查询结果passdef …...

编程日记 2024/12/5 20:52:39

自动化包括态交互与感交互，而智能化包括势交互与知交互

“自动化包括态交互与感交互&#xff0c;而智能化包括势交互与知交互”交互框架将交互过程划分为不同类型&#xff0c;有助于更清晰地理解自动化和智能化的本质及其在未来agent应用中的差异与联系。 1. 自动化&#xff1a;态交互与感交互 自动化主要关注的是高效、无差错地执行…...

编程日记 2024/12/5 20:50:36

VideoBooth: Diffusion-based Video Generation with Image Prompts

VideoBooth: Diffusion-based Video Generation with Image Prompts 概括 文章提出了一个视频生成模型VideoBooth&#xff0c;输入一张图片和一个文本提示词&#xff0c;即可输出保持图片中物体且符合文本提示词要求的视频。 方法 粗-细两阶段设计&#xff1a;1&#xff09;…...

编程日记 2024/12/5 20:48:35

模拟简单的iOT工作流

没有实际接触过iOT的流程&#xff0c;应该实际使用比这个接口返回要复杂&#xff0c;只是演示~希望能参与实际的接口接入&#xff0c;而不是只展示个假数据。 启动RabbitQ 使用的是3.8.5 启动命令 RabbitMQ Service - start RabbitMQ Command Prompt rabbitmqctl start_app …...

编程日记 2024/12/5 20:47:34

C++学习0.2: RAII

引用&#xff1a; 【代码质量】RAII在C编程中的必要性_raii 在c中的重要性-CSDN博客 C RAII典型应用之lock_guard和unique_lock模板_raii lock-CSDN博客 前言: 常用的线程间同步/通信&#xff08;IPC&#xff09;方式有锁&#xff08;互斥锁、读写锁、自旋锁&#xff09;、…...

编程日记 2024/12/5 20:46:31

k8s，进一步理解Pod

比如&#xff0c;凡是调度、网络、存储&#xff0c;以及安全相关的属性&#xff0c;基本上是Pod 级别的。 这些属性的共同特征是&#xff0c;它们描述的是“机器”这个整体&#xff0c;而不是里面运行的“程序”。比如&#xff0c;配置这个“机器”的网卡&#xff08;即&#…...

编程日记 2024/12/5 20:45:24

MFC图形函数学习13——在图形界面输出文字

本篇是图形函数学习的最后一篇&#xff0c;相关内容暂告一段落。 在图形界面输出文字&#xff0c;涉及文字字体、大小、颜色、背景、显示等问题&#xff0c;完成这些需要系列函数的支持。下面做简要介绍。 一、输出文本函数 原型&#xff1a;virtual BOOL te…...

编程日记 2024/12/5 20:44:23

【Canvas与雷达】点鼠标可暂停金边蓝屏雷达显示屏

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>点鼠标可暂停金边蓝屏雷达显示屏 Draft1</title><style typ…...

编程日记 2024/12/5 20:43:22

React第十二节组件之间通讯之发布订阅模式（使用pubsub-js插件）

组件之间通讯常用方案 1、通过props 2、通过context 3、通过发布订阅模式 4、通过Redux 后面会有专栏介绍 1、安装 pubsub-js 插件 yarn add pubsub-js 常用的事件 a、发布事件&#xff1a;传入一个自定义事件名称&#xff08;name&#xff09;&#xff0c;以及要发布的消息内…...

编程日记 2024/12/5 20:42:21

Vue3安装 运行教程

本文是综合了所有vue安装教程而成 更细化 更简略 希望对各位读者有所帮助&#xff01; Vue安装 1. Vue-cli脚手架安装 安装vue的方式有很多 我们这里选择npm方式安装vue npm方式 npm方式安装vue&#xff0c;详细介绍见下文。 1.node.js安装和配置 安装npm 需要安装note.js&…...

编程日记 2024/12/5 20:41:19

MySQL：约束constraint

约束就是表中数据的限制条件. 表在设计的时候加入约束的目的是为了保证表中记录的完整性和有效性&#xff0c;如用户表有些列的值&#xff08;手机号&#xff09;不能为空&#xff0c;有些列的值&#xff08;身份证号&#xff09;不能重复。 主键约束(primary key) PK MySQL主…...

编程日记 2024/12/5 20:40:18

使用Rufus制作Ubuntu需要注意

‌在使用Rufus制作Ubuntu启动盘并进行BIOS设置时&#xff0c;需要注意以下几点‌&#xff1a; ‌关闭RST&#xff08;英特尔 快速存储技术&#xff09;‌&#xff1a;在BIOS设置中&#xff0c;如果电脑启用了RST功能&#xff0c;需要将其关闭。因为Ubuntu可能无法检测到硬盘&a…...

编程日记 2024/12/5 20:39:16

探索Go语言的高级特性：性能分析与安全性

Go语言性能分析与安全性 引言 Go语言因其高效的并发特性、简洁的语法和强大的工具链而受到广泛欢迎。在实际开发中&#xff0c;性能分析和安全性是需要特别关注的两个方面。本文将深入探讨Go语言中的性能分析工具和安全性考虑&#xff0c;帮助开发者编写高效、安全的Go应用程…...

编程日记 2024/12/5 20:36:12

SearchSploit配合gcc的使用

渗透测试中&#xff0c;SearchSploit是一个非常有用的工具&#xff0c;用于在Exploit数据库中搜索漏洞利用代码。其使用方法如下&#xff1a; 安装SearchSploit&#xff1a;首先确保你的系统中已经安装了Kali Linux&#xff0c;因为SearchSploit是Kali Linux的一部分。如果没有…...

编程日记 2024/12/5 20:35:11

无人机设计:云台挂载!

一、无人机云台挂载设置 安装与固定 将云台固定到无人机的挂载点上&#xff0c;通常需要使用专用的固定架和螺丝等工具。 确保云台与无人机之间的连接牢固&#xff0c;避免在飞行过程中出现松动或脱落的情况。 连接与调试 将云台与无人机之间的连接线缆&#xff08;如电源…...

编程日记 2024/12/5 20:34:09

Spring Native适用场景、代理使用及测试部署策略

文章目录 1. Spring Native 适用的应用程序2. 在 Spring Native 中使用代理3. 测试和部署 Spring Native 应用测试部署 1. Spring Native 适用的应用程序 微服务&#xff1a;微服务架构中每个服务都相对独立&#xff0c;快速启动时间和较低的资源消耗对于提高部署效率和服务响…...

编程日记 2024/12/5 20:33:08

LeetCode—11. 盛最多水的容器（中等）

题目描述&#xff1a; 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;…...

编程日记 2024/12/5 20:21:56

第一部分：入门准备 1.欢迎来到新手村 --[JavaScript 新手村：开启编程之旅的第一步]

为什么学习 JavaScript&#xff1f; 学习 JavaScript 有多个重要的理由&#xff0c;它在现代 Web 开发中扮演着不可或缺的角色。以下是几个关键原因&#xff1a; 1. 广泛的应用 JavaScript 是唯一可以在浏览器端直接运行的编程语言&#xff0c;几乎所有的网站和Web应用都使用…...

编程日记 2024/12/5 20:19:53

BERT的中文问答系统50

我们将对BERT的中文问答系统48-1代码进行以下改进： 1.增加时间日期和日历功能：在GUI中增加显示当前时间和日期的功能，并提供一个日历组件。 2.增加更多模型类型：增加娱乐、电脑、军事、汽车、植物、科技、历史（朝代、皇帝）、名人、生活（出行、菜品、菜谱、居家），法律、…...

编程日记 2024/12/5 20:18:50

深入解析CMake中的find_package命令：用法、特性及版本依赖问题

深入解析CMake中的find_package命令&#xff1a;用法、特性及版本依赖问题 在现代软件开发中&#xff0c;CMake作为一个强大的构建系统&#xff0c;广泛应用于跨平台项目的管理与编译。find_package是CMake中一个核心命令&#xff0c;用于查找并配置项目所依赖的外部库或包。本…...

编程日记 2024/12/5 20:15:43

【OpenDRIVE_Python】使用python脚本输出OpenDRIVE数据中含有隧道tunnel的道路ID和隧道信息

示例代码说明&#xff1a; 遍历OpenDRIVE数据中每条道路Road,若Road中存在隧道tunnel属性&#xff0c;则将该道路ID和包含的所有隧道信息输出到xml文件中。 import xml.dom.minidom from xml.dom.minidom import parse from xml.dom import Node import sys import os # 读取…...

编程日记 2024/12/5 20:12:40

SIP系列五：HTTP(SIP)鉴权

我的音视频/流媒体开源项目(github) SIP系列目录 目录 一、基本认证(basic) 二、摘要认证(digest) 1、摘要认证(digest) RFC 2069​ 2、摘要认证(digest) RFC 2617​ 2.1、未定义qop字段或值为"(空) 2.2、qop值为"auth" 2.3、qop值为"auth-int&quo…...

编程日记 2024/12/5 20:11:37