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

webpack之处理样式资源

news 2025/7/8 20:01:17

处理样式资源

本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

#介绍

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

我们找 Loader 都应该去官方文档中找到对应的 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><h1>Hello Webpack5</h1><!-- 准备一个使用样式的 DOM 容器 --><div class="box1"></div><!-- 引入打包后的js文件，才能看到效果 --><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><h1>Hello Webpack5</h1><div class="box1"></div><div class="box2"></div><script src="../dist/main.js"></script></body>
</html>

#5. 运行指令

npx webpack

打开 index.html 页面查看效果

#处理 Sass 和 Scss

处理 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

/* 可以省略大括号和分号 */
.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>

#5. 运行指令

npx webpack

打开 index.html 页面查看效果

webpack之处理样式资源

处理样式资源本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 #介绍 Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源我们找 Loader 都应该去官方文档中找到对应的 Loader，然后…...

编程日记 2023/2/26 3:18:59

Golang 接口笔记

基本介绍接口是一个数据类型，可以定义一组方法，但都不需要实现。并且interface中不能包含任何变量。到某个自定义类型要使用的时候，再根据具体情况把这些方法实现出来语法type 接口名 interface {method1(参数列表) 返回值列表method2(参数列…...

编程日记 2023/2/26 3:17:33

[计算机网络(第八版)]第二章物理层（章节测试/章节作业）

章节作业带答案版选择题 (单选题)双绞线是用两根绝缘导线绞合而成的，绞合的目的是（ ）。 A. 减少干扰 B. 提高传输速度 C. 增大传输距离 D. 增大抗拉强度(单选题)在电缆中采用屏蔽技术可以带来的好处主要是（ ）。 A…...

编程日记 2023/2/26 3:15:53

Warm up 先看一段代码： import ObjectiveCclass Obj {var x: Double 0 }let v: NSObjectProtocol Obj() as! NSObjectProtocol let result v.isKind(of: Obj.self) let size class_getInstanceSize(Obj.self)我们有一个没有继承 NSObject、没有遵循 NSObjectP…...

编程日记 2023/2/26 3:14:36

ASEMI低压MOS管20N06参数，20N06体积，20N06大小

编辑-Z ASEMI低压MOS管20N06参数： 型号：20N06 漏极-源极电压（VDS）：60V 栅源电压（VGS）：20V 漏极电流（ID）：20A 功耗（PD&#xff0…...

编程日记 2023/2/26 3:13:17

常见前端基础面试题（HTML,CSS,JS）（四）

作用域和作用域链的理解作用域 （1）全局作用域最外层函数和最外层函数外面定义的变量拥有全局作用域所有未定义直接赋值的变量自动声明为全局作用域所有window对象的属性拥有全局作用域全局作用域有很大的弊端，过多的全局作用域变量会污染…...

编程日记 2023/2/26 3:10:46

RabbitMQ发布确认模式

目录一、发布确认原理二、发布确认的策略 （一）开启发布确认的方法 （二）单个确认模式 （三）批量确认模式 （四）异步确认模式 （五）如何处理异步未确认消…...

编程日记 2023/2/26 3:09:34

零基础的人如何入门 Python ？看完这篇文章你就懂了

第一部分：编程环境准备零基础入门Python的话我不建议用IDE，IDE叫集成开发环境，这东西一般是专业程序员用来实战开发用的，好处很多，比如：调试、语法高亮、项目管理、代码跳转、智能提示、自动完成、单元测…...

编程日记 2023/2/26 3:08:05

Atcoder abc257 E

E - Addition and Multiplication 2 题意: 给你一个数字n表示你现在拥有的金额然后给你1~9每个经营额所需要的成本, 设总经营额为x, 当前使用的经营额为y, 则每一次使用经营额时都有x10*xy 问, 如何在使用不大于成本数量的金额下, 使得经营额最高例如: 5 5 4 3 8 1 6 7 …...

编程日记 2023/2/26 3:06:32

模拟退火算法改进

import numpy as np import matplotlib.pyplot as plt import math import random from scipy.stats import norm from mpl_toolkits.mplot3d import Axes3D # 目标函数 def Function(x, y): return -20 * np.exp(-0.2*np.sqrt(0.5*(x*xy*y)))\ -np.exp(0.5*(n…...

编程日记 2023/2/26 3:05:18

SpringBoot+HttpClient+JsonPath提取A接口返回值作为参数调用B接口

前言在做java接口自动化中，我们常常需要依赖多个接口，A接口依赖B，C，D接口的响应作为请求参数；或者URL中的参数是从其他接口中提取返回值作获取参数这是必不可少的。那么怎么实现呢？下面就来介绍多业务依赖…...

编程日记 2023/2/26 3:03:52

JUC 之 CompletableFuture

——CompletableFuture Future Future 接口（FutureTask 实现类） 定义了操作异步任务执行的一些方法，如获取异步的执行结果、取消任务的执行、判断任务是否被取消、判断任务执行是否完毕例如： 主线程让一个子线程去执行任务&…...

编程日记 2023/2/26 3:01:19

7-vue-1

谈谈你对MVVM的理解为什么要有这些模式，目的：职责划分、分层（将Model层、View层进行分类）借鉴后端思想，对于前端而已，就是如何将数据同步到页面上 MVC模式代表：Backbone underscore jquer…...

编程日记 2023/2/26 2:59:54

OpenAPI SDK组件介绍

背景公司成立以来，积累了数以万计的可复用接口。上层的SaaS业务，原则上要复用这些接口开发自己的业务，为了屏蔽调用接口的复杂性，基础服务开发了apisdk组件，定义了一套声明OpenAPI的注解、注解解析器，实例…...

编程日记 2023/2/26 2:58:39

【Java】Synchronized锁原理和优化

一、synchronized介绍 synchronized中文意思是同步，也称之为”同步锁“。 synchronized的作用是保证在同一时刻， 被修饰的代码块或方法只会有一个线程执行，以达到保证并发安全的效果。 synchronized是Java中解决并发问题的一种最常用的方法…...

编程日记 2023/2/26 2:57:17

西北工业大学2020-2021学年大物（I）下期末试题选填解析

2 位移电流。磁效应服从安培环路，热效应不服从焦耳-楞次定律。注意，它是变化的电场而非磁场产生。3 又考恒定磁场中安培环路定理。4感生电场5 麦克斯韦速率分布函数。6 相同的高温热源和低温热源之间的一切可逆热机的工作效率相等，无论工质如…...

编程日记 2023/2/26 2:56:11

PHP - ChatGpt API 接入，代码，亲测！(最简单！)

由于最近ChatGpt 大火，但是门槛来说是对于大家最头疼的环节， 我自己也先开发了一个个人小程序！大家可以访问使用下， 由此ChatGpt 有一个API 可以仅供大伙对接让我来说下资质： 1：首先要搞得到一个 ChatGp…...

编程日记 2023/2/26 2:55:01

物联网MQTT协议简单介绍

物联网曾被认为是继计算机、互联网之后，信息技术行业的第三次浪潮。随着基础通讯设施的不断完善，尤其是 5G 的出现，进一步降低了万物互联的门槛和成本。物联网本身也是 AI 和区块链应用很好的落地场景之一，各大云服务商也在纷纷上…...

编程日记 2023/2/26 2:53:49

Dubbo 源码解读：负载均衡策略

概览 org.apache.dubbo包下META-INF/dubbo/internal/org.apache.dubbo.rpc.cluster.LoadBalance中内部spi实现类有以下几种： randomorg.apache.dubbo.rpc.cluster.loadbalance.RandomLoadBalance roundrobinorg.apache.dubbo.rpc.cluster.loadbalance.RoundRobinL…...

编程日记 2023/2/26 2:52:28

吃瓜教程笔记—Task04

神经网络知识点 M-P神经元模型如图所示： 神经元的工作机理：神经元接收来到n个其他神经元传递过来的输入信号，这些输入信号通过带权重的连接进行传递，神经元接收到的总输入值将与神经元的阈值进行比较，然后通过…...

编程日记 2023/2/26 2:51:05

接口测试中缓存处理策略

在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...

编程新知 2025/7/7 17:37:24

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤： 1）请求大小调整：首先，malloc 需要调整用户请求的大小，以适应内部数据结构（例如，可能需要存储额外的元数据）。通常，这包括对齐调整，确保分配的内存地址满足特定硬件要求（如对齐到8字节或16字节边界）。 2）空闲…...

编程新知 2025/6/18 0:49:30

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/7/6 2:27:06