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

前端工程化工具系列（十四）—— Webpack(v5.91.0)：应用模块打包器与构建工具

news 2025/7/9 0:27:44

Webpack 是用于现代 JavaScript 应用程序的静态模块打包器。
当 webpack 处理应用程序时，它会在内部构建一个依赖关系图，该图映射项目所需的每个模块最终会生成一个或多个包。

1 概念

1.1 modules

Webpack 中，无论是 JS 、CSS 还是图片等，总之一切皆模块。 有点像 RxJS，一切皆数据流。
模块间依赖的表述有很多种方式，如：import，require，define，@import，url(…), <img src=…> 等等。

1.2 Entry & Output

入口指示 webpack 应该使用哪个模块开始构建其内部依赖关系图。默认为： ./src/index.js。
出口告诉 webpack 在何处发出它创建的包文件以及如何命名这些文件。默认为： ./dist/main.js

1.3 Loaders

Webpack 默认只能解析 JavaScript 和 JSON，可以通过添加 loaders 来处理其他类型的文件。

1.4 Plugins

可以利用插件来执行更广泛的任务，例如打包优化，资产管理和环境变量的注入。

1.5 Mode

分 development、production、none 三种，每种都会对应一系列默认配置。

2 安装

pnpm i -D webpack webpack-cli

使用 web 服务器做调试和热更新，则需安装：

npm add -D webpack-dev-server

添加各种 loader

npm add -D babel-loader sass-loader sass postcss-loader css-loader style-loader

3 配置

3.1 针对 JavaScript

（待补充）

3.2 针对 TypeScript

相关文章：

前端工程化工具系列（十四）—— Webpack(v5.91.0)：应用模块打包器与构建工具

Webpack 是用于现代 JavaScript 应用程序的静态模块打包器。 当 webpack 处理应用程序时&#xff0c;它会在内部构建一个依赖关系图&#xff0c;该图映射项目所需的每个模块最终会生成一个或多个包。 1 概念 1.1 modules Webpack 中&#xff0c;无论是 JS 、CSS 还是图片等&…...

编程日记 2024/6/13 13:13:30

ThinkPHP+Bootstrap简约自适应网址导航网站源码

使用 ThinkPHPbootstrap 开发&#xff0c;后台采用全局 ajax 无刷新加载&#xff0c;前后台自适应&#xff0c;前台页面非常简洁适合自己收藏网站或做导航网站。 搭建教程&#xff1a; 1.整个主机 2.绑定解析域名 3.上传源码&#xff0c;解压 把解压出来的 nav.sql 文件导入数…...

编程日记 2024/6/13 13:11:28

Flutter 使用ffigen生成ffmpeg的dart接口

Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频 第六章 桌面端使用texture_rgba_renderer渲染视频 第七章 使用ff…...

编程日记 2024/6/13 13:09:26

(message): No CUDA toolset found.

解决方法&#xff1a; C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v10.2\extras\visual_studio_integration\MSBuildExtensions\ 下的4个文件 复制到 D:\Program Files\Microsoft Visual Studio\2022\Enterprise\MSBuild\Microsoft\VC\v170\BuildCustomizations\下。…...

编程日记 2024/6/13 13:08:25

【python】邮箱正则验证

当然可以。以下是一个使用Python正则表达式的例子&#xff0c;用于检查一个字符串是否是一个有效的电子邮件地址&#xff1a; import re def is_valid_email(email):regex r^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$return bool(re.match(regex, email)) # 测试电子邮件…...

编程日记 2024/6/13 13:07:24

深度学习（四）——torchvision中数据集的使用

1. 参数详解 torchvision中每个数据集的参数都是大同小异的&#xff0c;这里只介绍CIFAR10数据集 该数据集的数据格式为PIL格式 class torchvision.datasets.CIFAR10(root:str,train:boolTrue,transform:Optional[Callable]None,target_transform:Optional[Callable]None,do…...

编程日记 2024/6/13 13:06:23

【全开源】图书借阅管理系统源码（ThinkPHP+FastAdmin）

&#x1f4da;图书借阅管理系统&#xff1a;打造你的私人图书馆 一款基于ThinkPHPFastAdmin开发的简易图书借阅管理系统&#xff0c;一款轻量级的图书借阅管理系统&#xff0c;具有会员管理&#xff0c;图书管理&#xff0c;借阅及归还管理&#xff0c;会员充值等基本功能&…...

编程日记 2024/6/13 13:05:21

Mysql中使用where 1=1有什么问题吗

昨天偶然看见一篇文章&#xff0c;提到说如果在mysql查询语句中&#xff0c;使用where 11会有性能问题&#xff1f;&#xff1f; 这着实把我吸引了&#xff0c;因为我项目中就有不少同事&#xff0c;包括我自己也有这样写的。为了不给其他人挖坑&#xff0c;赶紧学习一下&…...

编程日记 2024/6/13 13:00:13

中心极限定理的MATLAB例

独立同分布的中心极限定理&#xff1a; 设 X 1 , X 2 , … , X n X_1, X_2, \ldots, X_n X1​,X2​,…,Xn​ 是独立同分布的随机变量序列&#xff0c;且 E ( X i ) μ E(X_i) \mu E(Xi​)μ&#xff0c; D ( X i ) σ 2 > 0 D(X_i) \sigma^2 > 0 D(Xi​)σ2>0&a…...

编程日记 2024/6/13 12:59:12

定义input_password函数，提示用户输入密码.如果用户输入长度＜8，抛出异常，如果用户输入长度＞=8，返回输入的密码

def input_password(password):str1passwordlen1len(str1)try:if len1<8:raise ValueError("密码长度不能小于8")else:return print(f"你的密码为:{password},请确认")except ValueError as e:print(f":Error is {e}")number1input("请…...

编程日记 2024/6/13 12:55:08

【深度学习】IP-Adapter 和 InstantID 的核心机制比较

IP-Adapter 和 InstantID 是两个在图像生成中具有不同优势和应用场景的模型。以下是这两个模型的区别及其理论分析。 IP-Adapter 特点: 图像提示能力: IP-Adapter 通过引入图像提示能力&#xff0c;使得预训练的文本到图像扩散模型可以接受图像作为提示&#xff0c;从而生成…...

编程日记 2024/6/13 12:53:06

JEPaaS 低代码平台 j_spring_security_check SQL注入漏洞复现

0x01 产品简介 JEPaaS是一款优秀的软件平台产品，可视化开发环境，低代码拖拽式配置开发，操作极其简单，可以帮助解决Java项目80%的重复工作，让开发更多关注业务逻辑，大大提高开发效率，能帮助公司大幅节省人力成本和时间成本，同时又不失灵活性。适用于搭建 OA、ERP、CRM、…...

编程日记 2024/6/13 12:52:05

天锐绿盾 | 无感知加密软件、透明加密系统、数据防泄漏软件

摘要&#xff1a;文件加密软件,包含禁止非授权的文件泄密和抄袭复制解决方案即使被复制泄密都是自动加密无法阅读,透明加密,反复制软件,内网监控,文件加密,网络安全方案,透明文件加密,加密文件,图纸加密,知识产权保护,加密数据; 通过绿盾信息安全管理软件&#xff0c;系统在不改…...

编程日记 2024/6/13 12:51:04

kubernetes（k8s）集群部署（2）

目录 k8s集群类型 k8s集群规划&#xff1a; 1.基础环境准备&#xff1a; &#xff08;1&#xff09;保证可以连接外网 &#xff08;2&#xff09;关闭禁用防火墙和selinux &#xff08;3&#xff09;同步阿里云服务器时间&#xff08;达到集群之间时间同步&#xff09; &…...

编程日记 2024/6/13 12:50:03

Git操作指南

1、提交代码操作 拉取线上分支&#xff0c;防止本地代码提交冲突 git pull origin dev git add . git commit -m “给本次提交添加注释” git push origin dev 2、打分支并切换分支 git checkout -b 新建并切换到新分支 切换到主分支 git checkout main git merge dev git p…...

编程日记 2024/6/13 12:49:03

全域推广和标准推广哪个更好。谁更容易获客？

随着全域概念的兴起&#xff0c;全域推广逐渐走进人们视野&#xff0c;并成为新的互联网热词。在此背景下&#xff0c;与全域推广相关的话题&#xff0c;如全域推广是什么及全域推广和标准推广的区别等成为了许多创业者讨论和搜索的对象。 所谓的全域推广&#xff0c;简单来说…...

编程日记 2024/6/13 12:48:01

首张地下地图！D-Wave 专用量子计算机助力沙特阿美完成地震成像

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;800字丨3分钟阅读 摘要&#xff1a;过去两年中&#xff0c;沙特阿美研究中心一直在使用总部在加拿大的D-Wave 公司的专用量子计算技术&#xff0c;…...

编程日记 2024/6/13 12:43:56

机器学习分类及算法

1. 深度学习 1.1学习算法 1.2基本术语和概念 1.3机器学习分类常用算法 1.3.1线性回归 1.3.2逻辑回归 1.3.3决策树 1.3.4朴素贝叶斯 1.3.5支持向量机SVM 1.3.6K-最近临邻KNN 还有K-均值&#xff08;k-means&#xff09;、随机森林、降维、人工神经网络等 1.4超参数和验证集 1.4.…...

编程日记 2024/6/13 12:42:55

电容器连接到 PCB 电源层的过孔配置

为什么我们需要去耦电容器&#xff1f; 时钟数字IC通常需要大的瞬态电源电流。例如&#xff0c;大型微处理器可以在很短的时间内消耗高达 10 A 的电流。随着 IC 输出的上升/下降时间缩短&#xff0c;我们需要以更高的速率提供瞬态能量。PCB 的电源和接地导体确实存在一定的电感…...

编程日记 2024/6/13 12:41:54

springboot+shiro+jwt 兼容session和token

最近和别的软件集成项目&#xff0c;需要提供给别人接口来进行数据传输&#xff0c;发现给他token后并不能访问我的接口&#xff0c;拿postman试了下还真是不行。检查代码发现项目的shiro配置是通过session会话来校验信息的 &#xff0c;我之前一直是前后端自己写&#xff0c;用…...

编程日记 2024/6/13 12:38:50

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/7/8 12:03:18

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/7/8 1:38:37

相机从app启动流程

一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下： 重点代码分析： 启动相机前，先要通过getCameraIdList获取camera的个数以及id，然后可以通过getCameraCharacteristics获取对应id camera的capabilities（静态信息）进行一些openCamera前的…...

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

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/7/7 15:30:52

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/6/19 0:27:55

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/7/5 5:14:22

【C++】纯虚函数类外可以写实现吗？

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

编程新知 2025/7/8 4:09:26

鸿蒙（HarmonyOS5）实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

编程新知 2025/7/7 5:23:54

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/7/7 14:02:19

C#最佳实践：为何优先使用as或is而非强制转换

C#最佳实践&#xff1a;为何优先使用as或is而非强制转换 在 C# 的编程世界里&#xff0c;类型转换是我们经常会遇到的操作。就像在现实生活中&#xff0c;我们可能需要把不同形状的物品重新整理归类一样&#xff0c;在代码里&#xff0c;我们也常常需要将一个数据类型转换为另…...

编程新知 2025/6/22 1:30:36