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

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

news 2025/9/19 16:22:41

一、开发模式介绍

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

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

编译代码，使浏览器能识别运行
- 开发时我们有样式资源、字体图标、图片资源、html 资源等，webpack 默认都不能处理这些资源，所以我们要加载配置来编译这些资源
代码质量检查，树立代码规范
- 提前检查代码的一些隐患，让代码运行时能更加健壮。
- 提前检查代码规范和格式，统一团队编码风格，让代码更优雅美观。

二、处理样式资源

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

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

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

Loaders | webpack 中文文档 (docschina.org)https://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开发模式及处理样式资源

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

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

leetcode--设计链表

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

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

【MySQL】：数据库操作

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

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

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

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

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

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

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

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

Qt 详解QtNFC 读写模式

文章目录 Qt NFC 读写模式详解1. NFC 读写模式简介1.1 什么是 NFC 读写模式？主要功能： 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迭代器-大数据量的处理

一生成器的实际使用（大量数据的导出） #分批导出数据然后分批写入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

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

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

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

VideoBooth: Diffusion-based Video Generation with Image Prompts

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

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

模拟简单的iOT工作流

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

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

C++学习0.2: RAII

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

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

k8s，进一步理解Pod

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

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

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

本篇是图形函数学习的最后一篇，相关内容暂告一段落。在图形界面输出文字，涉及文字字体、大小、颜色、背景、显示等问题，完成这些需要系列函数的支持。下面做简要介绍。一、输出文本函数原型：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、发布事件：传入一个自定义事件名称（name），以及要发布的消息内…...

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

Vue3安装运行教程

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

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

MySQL：约束constraint

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

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

使用Rufus制作Ubuntu需要注意

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

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 （1）连接查询（JOIN） 内连接（INNER JOIN）：返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

SciencePlots——绘制论文中的图片

文章目录安装一、风格二、1 资源安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源论文绘图神器来了：一行…...

编程新知 2025/9/8 13:50:07

【Java_EE】Spring MVC

目录 Spring Web MVC 编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递注意事项编辑参数重命名 RequestParam 编辑编辑传递集合 RequestParam 传递JSON数据编辑RequestBody …...

编程新知 2025/9/3 18:59:01

视频行为标注工具BehaviLabel（源码+使用介绍+Windows.Exe版本）

前言： 最近在做行为检测相关的模型，用的是时空图卷积网络（STGCN），但原有kinetic-400数据集数据质量较低，需要进行细粒度的标注，同时粗略搜了下已有开源工具基本都集中于图像分割这块&#xff0c…...

编程新知 2025/9/18 12:53:19

Java编程之桥接模式

定义桥接模式（Bridge Pattern）属于结构型设计模式，它的核心意图是将抽象部分与实现部分分离，使它们可以独立地变化。这种模式通过组合关系来替代继承关系，从而降低了抽象和实现这两个可变维度之间的耦合度。用例子…...

编程新知 2025/6/17 3:19:01

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好，我是java1234_小锋老师，看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】，分享下哈。项目视频演示【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

编程新知 2025/9/2 17:48:37

【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道

文/法律实务观察组在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...

编程新知 2025/9/16 13:55:12

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题

20250609在荣品的PRO-RK3566开发板的Android13下解决串口可以执行命令但是脚本执行命令异常的问题 2025/6/9 20:54 缘起，为了跨网段推流，千辛万苦配置好了网络参数。但是命令iptables -t filter -F tetherctrl_FORWARD可以在调试串口/DEBUG口正确执行。…...

编程新知 2025/9/9 9:59:58

设备健康管理的范式革命：中讯烛龙全链路智能守护系统

当工业设备的“亚健康”状态导致隐性产能损失高达23%时，中讯烛龙推出 “感知-诊断-决策-闭环”四位一体解决方案，让设备全生命周期健康管理成为企业增长的隐形引擎。一、行业痛点：传统运维的三大断层 1. 健康感知盲区某风电场因无法捕…...

编程新知 2025/9/17 21:00:52

低代码采购系统搭建：鲸采云+能源行业订单管理自动化案例

在能源行业数字化转型浪潮下，某大型能源集团通过鲸采云低代码平台，仅用3周时间就完成了采购订单管理系统的定制化搭建。本文将揭秘这一成功案例的实施路径与关键成效。项目背景与挑战该企业面临： 供应商分散：200供应商使用不同…...

编程新知 2025/9/18 12:41:33

一、开发模式介绍

二、处理样式资源

2.1 处理CSS资源

2.1.1 下载包

2.1.2 功能介绍

2.1.3 配置 -- webpack.config.js

2.1.4 添加CSS资源

2.1.5 运行指令

2.2 处理Less资源

2.2.1 下载包

2.2.2 功能介绍

2.2.3 配置 -- webpack.config.js

2.2.4 添加Less资源

2.2.5 运行指令

2.3 处理Sass和Scss资源

2.3.1 下载包

2.3.2 功能介绍

2.3.3 配置 -- webpack.config.js

2.3.4 添加Sass资源

2.3.5 运行指令

2.4 处理Styl资源

2.4.1 下载包

2.4.2 功能介绍

2.4.3 配置 -- webpack.config.js

2.4.4 添加Styl资源

2.4.5 运行指令

相关文章：