前端工程化工具系列(十四)—— Webpack(v5.91.0):应用模块打包器与构建工具
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 处理应用程序时,它会在内部构建一个依赖关系图,该图映射项目所需的每个模块最终会生成一个或多个包。 1 概念 1.1 modules Webpack 中,无论是 JS 、CSS 还是图片等&…...
ThinkPHP+Bootstrap简约自适应网址导航网站源码
使用 ThinkPHPbootstrap 开发,后台采用全局 ajax 无刷新加载,前后台自适应,前台页面非常简洁适合自己收藏网站或做导航网站。 搭建教程: 1.整个主机 2.绑定解析域名 3.上传源码,解压 把解压出来的 nav.sql 文件导入数…...
Flutter 使用ffigen生成ffmpeg的dart接口
Flutter视频渲染系列 第一章 Android使用Texture渲染视频 第二章 Windows使用Texture渲染视频 第三章 Linux使用Texture渲染视频 第四章 全平台FFICustomPainter渲染视频 第五章 Windows使用Native窗口渲染视频 第六章 桌面端使用texture_rgba_renderer渲染视频 第七章 使用ff…...
(message): No CUDA toolset found.
解决方法: 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\下。…...
【python】邮箱正则验证
当然可以。以下是一个使用Python正则表达式的例子,用于检查一个字符串是否是一个有效的电子邮件地址: 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)) # 测试电子邮件…...
深度学习(四)——torchvision中数据集的使用
1. 参数详解 torchvision中每个数据集的参数都是大同小异的,这里只介绍CIFAR10数据集 该数据集的数据格式为PIL格式 class torchvision.datasets.CIFAR10(root:str,train:boolTrue,transform:Optional[Callable]None,target_transform:Optional[Callable]None,do…...
【全开源】图书借阅管理系统源码(ThinkPHP+FastAdmin)
📚图书借阅管理系统:打造你的私人图书馆 一款基于ThinkPHPFastAdmin开发的简易图书借阅管理系统,一款轻量级的图书借阅管理系统,具有会员管理,图书管理,借阅及归还管理,会员充值等基本功能&…...
Mysql中使用where 1=1有什么问题吗
昨天偶然看见一篇文章,提到说如果在mysql查询语句中,使用where 11会有性能问题?? 这着实把我吸引了,因为我项目中就有不少同事,包括我自己也有这样写的。为了不给其他人挖坑,赶紧学习一下&…...
中心极限定理的MATLAB例
独立同分布的中心极限定理: 设 X 1 , X 2 , … , X n X_1, X_2, \ldots, X_n X1,X2,…,Xn 是独立同分布的随机变量序列,且 E ( X i ) μ E(X_i) \mu E(Xi)μ, D ( X i ) σ 2 > 0 D(X_i) \sigma^2 > 0 D(Xi)σ2>0&a…...
定义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("请…...
【深度学习】IP-Adapter 和 InstantID 的核心机制比较
IP-Adapter 和 InstantID 是两个在图像生成中具有不同优势和应用场景的模型。以下是这两个模型的区别及其理论分析。 IP-Adapter 特点: 图像提示能力: IP-Adapter 通过引入图像提示能力,使得预训练的文本到图像扩散模型可以接受图像作为提示,从而生成…...
JEPaaS 低代码平台 j_spring_security_check SQL注入漏洞复现
0x01 产品简介 JEPaaS是一款优秀的软件平台产品,可视化开发环境,低代码拖拽式配置开发,操作极其简单,可以帮助解决Java项目80%的重复工作,让开发更多关注业务逻辑,大大提高开发效率,能帮助公司大幅节省人力成本和时间成本,同时又不失灵活性。适用于搭建 OA、ERP、CRM、…...
天锐绿盾 | 无感知加密软件、透明加密系统、数据防泄漏软件
摘要:文件加密软件,包含禁止非授权的文件泄密和抄袭复制解决方案即使被复制泄密都是自动加密无法阅读,透明加密,反复制软件,内网监控,文件加密,网络安全方案,透明文件加密,加密文件,图纸加密,知识产权保护,加密数据; 通过绿盾信息安全管理软件,系统在不改…...
kubernetes(k8s)集群部署(2)
目录 k8s集群类型 k8s集群规划: 1.基础环境准备: (1)保证可以连接外网 (2)关闭禁用防火墙和selinux (3)同步阿里云服务器时间(达到集群之间时间同步) &…...
Git操作指南
1、提交代码操作 拉取线上分支,防止本地代码提交冲突 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…...
全域推广和标准推广哪个更好。谁更容易获客?
随着全域概念的兴起,全域推广逐渐走进人们视野,并成为新的互联网热词。在此背景下,与全域推广相关的话题,如全域推广是什么及全域推广和标准推广的区别等成为了许多创业者讨论和搜索的对象。 所谓的全域推广,简单来说…...
首张地下地图!D-Wave 专用量子计算机助力沙特阿美完成地震成像
内容来源:量子前哨(ID:Qforepost) 文丨浪味仙 排版丨沛贤 深度好文:800字丨3分钟阅读 摘要:过去两年中,沙特阿美研究中心一直在使用总部在加拿大的D-Wave 公司的专用量子计算技术,…...
机器学习分类及算法
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-均值(k-means)、随机森林、降维、人工神经网络等 1.4超参数和验证集 1.4.…...
电容器连接到 PCB 电源层的过孔配置
为什么我们需要去耦电容器? 时钟数字IC通常需要大的瞬态电源电流。例如,大型微处理器可以在很短的时间内消耗高达 10 A 的电流。随着 IC 输出的上升/下降时间缩短,我们需要以更高的速率提供瞬态能量。PCB 的电源和接地导体确实存在一定的电感…...
springboot+shiro+jwt 兼容session和token
最近和别的软件集成项目,需要提供给别人接口来进行数据传输,发现给他token后并不能访问我的接口,拿postman试了下还真是不行。检查代码发现项目的shiro配置是通过session会话来校验信息的 ,我之前一直是前后端自己写,用…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器
一.自适应梯度算法Adagrad概述 Adagrad(Adaptive Gradient Algorithm)是一种自适应学习率的优化算法,由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率,适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接:A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串,只有在同时为 o 时输出 Yes 并结束程序,否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
电脑插入多块移动硬盘后经常出现卡顿和蓝屏
当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时,可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案: 1. 检查电源供电问题 问题原因:多块移动硬盘同时运行可能导致USB接口供电不足&#x…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
rnn判断string中第一次出现a的下标
# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...
