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

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

news 2026/2/8 22:37:07

一、开发模式介绍

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

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

编译代码，使浏览器能识别运行
- 开发时我们有样式资源、字体图标、图片资源、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

浅谈 React Hooks

React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...

编程新知 2025/9/23 15:13:40

工程地质软件市场：发展现状、趋势与策略建议

一、引言在工程建设领域，准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具，正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现，这取决于你是想在组件内部直接设置，还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法： 1. 内联样式你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2026/2/4 20:47:44

从零实现STL哈希容器：unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享希望也能为你带来些帮助~ 那咱们废话不多说，直接开始吧！ 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

编程新知 2026/1/31 12:47:25

Ascend NPU上适配Step-Audio模型

1 概述 1.1 简述 Step-Audio 是业界首个集语音理解与生成控制一体化的产品级开源实时语音对话系统，支持多语言对话（如中文，英文，日语），语音情感（如开心，悲伤）&#x…...

编程新知 2026/1/31 4:37:39

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作在…...

编程新知 2025/9/22 21:37:01

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码我们将以 fmt 这个流行的格式化库为例，演示如何：使用 FetchContent 从 GitH…...

编程新知 2026/2/1 3:19:54

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路在Android中，可以通过监听键盘的显示和隐藏事件，动态调整弹窗的位置。关键点在于获取键盘高度，并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

图表类系列各种样式PPT模版分享

图标图表系列PPT模版，柱状图PPT模版，线状图PPT模版，折线图PPT模版，饼状图PPT模版，雷达图PPT模版，树状图PPT模版图表类系列各种样式PPT模版分享：图表系列PPT模板https://pan.quark.cn/s/20d40aa…...

编程新知 2026/2/4 18:07:02

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...

编程新知 2026/2/8 3:32:52

一、开发模式介绍

二、处理样式资源

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 运行指令

相关文章：