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

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

news 2026/5/14 3:38:47

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

软件测试十年老兵自述：从月薪3K到年薪50W的跃迁密码

一个Bug改变的人生轨迹十年前的那个下午&#xff0c;我还记得格外清晰。作为某外包公司的“点点点”工程师&#xff0c;我机械地对着一个后台管理系统重复着测试用例。月薪3000&#xff0c;坐标二线城市&#xff0c;每天的工作就是执行别人写好的用例&#xff0c;发现Bug就提交…...

编程新知 2026/5/14 3:00:01

近屿AI学：白天做运维，晚上学AI，两天入职

何屿&#xff08;化名&#xff09;白天还在做传统运维&#xff0c;晚上已经开始补AI课程。听起来有点折腾&#xff0c;但他比谁都清楚&#xff0c;稳定并不等于安全。AI兴起后&#xff0c;岗位要求正在变&#xff0c;旧经验能撑多久&#xff0c;他心里没底。与其等到被动调整&a…...

编程新知 2026/5/14 2:39:02

通过Taotoken为OpenClaw配置自定义模型供应商的详细步骤

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过Taotoken为OpenClaw配置自定义模型供应商的详细步骤 OpenClaw是一个流行的AI智能体开发框架&#xff0c;它允许开发者灵活地配…...

编程新知 2026/5/14 2:21:55

从丰田SUA事件看安全关键系统软件可靠性：设计原则与工程实践

1. 项目概述&#xff1a;当软件缺陷成为致命威胁我干了十多年嵌入式开发&#xff0c;从单片机玩到复杂的汽车域控制器&#xff0c;经手的代码行数自己都数不清了。但每次看到“软件缺陷导致车辆突然加速”这类新闻&#xff0c;后背还是会发凉。这行干久了&#xff0c;你会对代码…...

编程新知 2026/5/13 23:27:10

基于MCP协议构建低成本另类投资数据引擎，赋能AI原生投研

1. 项目概述&#xff1a;一个为AI助手注入投资洞察力的“数据引擎” 如果你是一名对冲基金的分析师、量化研究员&#xff0c;或者只是对市场有敏锐嗅觉的个人投资者&#xff0c;你肯定知道&#xff0c;在今天的市场里&#xff0c;光看K线图和财报已经不够了。真正的“阿尔法”…...

编程新知 2026/5/13 23:27:10

苹果与伊利诺伊大学:四步AI绘图实现媲美五十步生成质量能力提升

这项由苹果公司&#xff08;Apple&#xff09;与伊利诺伊大学香槟分校&#xff08;UIUC&#xff09;联合开展的研究&#xff0c;于2026年5月以预印本形式发布在arXiv平台&#xff0c;论文编号为arXiv:2605.08078。研究提出了一种名为"正则化轨迹模型"&#xff08;Nor…...

编程新知 2026/5/13 22:27:31

ESP32-S3-DevKitC-1 v1.8开箱实测：从驱动安装到‘Hello World’串口打印全记录

ESP32-S3-DevKitC-1 v1.8实战指南&#xff1a;从开箱到首个串口通信项目 第一次拿到ESP32-S3-DevKitC-1开发板时&#xff0c;那种既兴奋又略带忐忑的心情记忆犹新。作为乐鑫科技推出的新一代Wi-Fi蓝牙双模开发板&#xff0c;ESP32-S3系列在性能和外设支持上都有显著提升&#x…...

编程新知 2026/5/13 21:59:49

Linux内核安全钩子（Hook）深度探秘：以一次文件打开操作为例

Linux内核安全钩子&#xff08;Hook&#xff09;深度探秘&#xff1a;以一次文件打开操作为例 当我们在终端输入cat /etc/shadow时&#xff0c;系统背后究竟发生了什么&#xff1f;这个看似简单的操作&#xff0c;实际上触发了一系列精妙的安全检查机制。本文将带您深入Linux内…...

编程新知 2026/5/13 21:12:18

告别机械生硬感：我熬夜实测了4款英文降AI工具，教你搞定结构级优化

最近不少学弟学妹跟我倒苦水&#xff0c;说查重率好不容易降下来了&#xff0c;结果偏偏卡在了英文降ai率上&#xff0c;眼看交稿DDL越来越近&#xff0c;心里特别着急。 我太懂这种感受了&#xff0c;我当时也因为英文降aigc率踩过不少坑&#xff0c;自己连夜纯手动改&#x…...

编程新知 2026/5/13 21:02:09

告别报错！保姆级教程：在PyCharm 2023.3上完美安装ManimCE（附国内镜像加速）

在PyCharm 2023.3中零失败安装ManimCE的终极指南 当数学可视化遇上Python&#xff0c;ManimCE无疑是当前最强大的工具之一。但对于许多开发者来说&#xff0c;从环境配置到成功运行第一个动画&#xff0c;这段旅程往往充满坎坷。本文将彻底解决安装过程中的所有痛点&#xff0c…...

编程新知 2026/5/13 20:43:04