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

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

news 2025/7/15 12:44:57

一、开发模式介绍

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

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

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周，有很多同学在写期末Java web作业时，运行tomcat出现乱码问题，经过多次解决与研究，我做了如下整理： 原因： IDEA本身编码与tomcat的编码与Windows编码不同导致，Windows 系统控制台…...

编程新知 2025/7/13 9:04:18

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/7/15 8:01:09

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/7/15 12:14:20

css的定位（position）详解：相对定位绝对定位固定定位

在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...

编程新知 2025/7/6 1:55:51

数据库分批入库

今天在工作中，遇到一个问题，就是分批查询的时候，由于批次过大导致出现了一些问题，一下是问题描述和解决方案： 示例： // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/7 14:25:55

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式：dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一，腐蚀跟膨胀属于反向操作，膨胀是把图像图像变大，而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。腐蚀…...

编程新知 2025/7/15 9:10:20

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统实现kefu123登录，不允许匿名访问，kefu只能访问/data/kefu目录，不能查看其他目录创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/7/14 1:42:57

Java编程之桥接模式

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

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

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具，用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中，cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19

Spring Security 认证流程——补充

一、认证流程概述 Spring Security 的认证流程基于过滤器链（Filter Chain），核心组件包括 UsernamePasswordAuthenticationFilter、AuthenticationManager、UserDetailsService 等。整个流程可分为以下步骤： 用户提交登录请求拦…...

编程新知 2025/7/12 18:25:17

一、开发模式介绍

二、处理样式资源

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

相关文章：