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

Webpack学习笔记(1)

1.为什么使用webpack?

webpack不仅可以打包js代码,并且那个且支持es模块化和commonjs,支持其他静态资源打包,如图片、字体。。。

2.如何解决作用域问题?

作用域问题:例如loadsh等库,会绑定window对象,会使得window臃肿。

grunt和gulp是最早使用的任务执行器,是将所有的项目文件拼接在一起(IIFE),从而解决了大型作用域问题。

当函数变成了一个立即调用的表达式时,表达式中的变量不能够在外部访问,不会污染window,解决了作用域问题。

如果部分暴露,部分不暴露,我们可以这样解决 

3.如何解决代码拆分问题?

问题:如果处理一个大的文件,用户需等待一段时间才可以加载成功(白屏)。

解决:node.js模块化处理。

common.js:浏览器不支持模块化

暴露方法:

引用(开箱即用):

4.如何让浏览器支持模块?

解决:使用require.js

define定义依赖和真正暴露:没有依赖前面为【】

如何加载文件:(在index.html使用script标签加载,data-main='入口文件路径')

入口文件访问文件:访问目录点(位置)还在index.html

解决:ESMAScript模块化<script type='module>

暴露:export default xxx

引入:import 名字 from '路径'

出现跨域问题:npx http-server

npx:当某个模块不存在时,从互联网帮忙安装一个模块

5.webpack,parcel,rollup,vite

6.安装运行webpack

npm i webpack webpack-cli

npx webpack

7.插件是什么?

创建webpack.config.js,命名不可以改变。

引入了一个创建html文件的插件HtmlWebpackPlugin

8.搭建开发环境

开发模式:

npx webpack --watch 监听但手动刷新

安装webpack-dev-server,热模块更新。

npx webpack-dev-server --open,自动打开

配置dev-server,当前服务的根目录

9.资源模块介绍

asset Moudle 允许使用webpack打包其他资源文件

1.asset/resource:发送一个单独文件并导出url;

2.asset/inline:导出一个资源的dataurl;

3.asset/source:导出资源的源代码;

4.asset:通用资源类型,在导出dataurl和单独文件之间选择一个导出。

webpack.config.js中设置module属性:

上图使用asset/resource打包.png后缀的文件;使用asset/inline打包.svg后缀的文件;使用asset/source打包.txt后缀的文件;使用asset打包.jpg后缀的文件,在使用asset时可以自定义资源界限,默认是小于8kb会被视为inline模型,反之是resource模型。

在output中设置也是自定义文件名和路径优先级低于在generator设置。

index.js:

相关文章:

Webpack学习笔记(1)

1.为什么使用webpack? webpack不仅可以打包js代码&#xff0c;并且那个且支持es模块化和commonjs,支持其他静态资源打包&#xff0c;如图片、字体。。。 2.如何解决作用域问题&#xff1f; 作用域问题&#xff1a;例如loadsh等库&#xff0c;会绑定window对象&#xff0c;会…...

使用xpath规则进行提取数据并存储

下载lxml !pip install lxmlimport requests headers{"user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.6261.95 Safari/537.36" } url"https://movie.douban.com/chart" respon…...

【物联网技术与应用】实验3:七彩LED灯闪烁

实验3 七彩LED灯闪烁 【实验介绍】 七彩LED灯上电后&#xff0c;7色动闪光LED模块可自动闪烁内置颜色。它可以用来制作相当吸引人的灯光效果。 【实验组件】 ● Arduino Uno主板* 1 ● USB数据线* 1 ● 7彩LED模块*1 ● 面包板*1 ● 9V方型电池*1 ● 跳线若干 【实验原…...

素数回文数的个数

素数回文数的个数 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 求11到n之间&#xff08;包括n&#xff09;&#xff0c;既是素数又是回文数的整数有多少个。 输入 一个大于11小于1000的整数n。 输出…...

车辆重识别代码笔记12.18

1、实例归一化&#xff08;Instance Normalization&#xff09;和批量归一化&#xff08;Batch Normalization&#xff09; 实例归一化&#xff08;Instance Normalization&#xff09;&#xff1a; 计算步骤&#xff1a; 对于每个输入样本&#xff0c;在每个通道上分别计算均…...

selenium 在已打开浏览器上继续调试

关闭浏览器&#xff0c;终端执行如下指令&#xff0c;--user-data-dir换成自己的User Data路径 chrome.exe --remote-debugging-port9222 --user-data-dir"C:\Users\xxx\AppData\Local\Google\Chrome\User Data" 会打开浏览器&#xff0c;打开百度&#xff0c;如下状…...

Sentry日志管理thinkphp8 tp8 sentry9 sentry8 php8.x配置步骤, tp8自定义异常处理类使用方法

tp8的默认使用的就是composer来管理第三方包, 所以直接使用 composer 来安装 sentry9 即可. 同时tp8和tp5的配置方式不太一样, 这里我们直接使用自定义异常类来处理Sentry的异常. 1. 安装 sentry9 包 # 安装 sentry9 包 composer require "tekintian/sentry9-php" …...

【经验分享】容器云搭建的知识点

最近忙于备考没关注&#xff0c;有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源&#xff0c;但我以交流、交换为主&#xff0c;笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟&#xff0c;为了避免更多人花没必要的钱&#xff0c;所以决定公…...

Java对集合的操作方法

1. 数组转集合 //数组转集合 String[] split quickRechargeAmount.split(","); List<String> stringList Stream.of(split).collect(Collectors.toList()); 2. 对List集合数据内容进行分组 //对List集合数据内容进行分组 Map<String, List<LiveAppGi…...

FreeRTOS--基础知识

FreeRTOS基础知识 裸机与RTOS的特点&#xff1a; 裸机&#xff1a; 裸机又称为前后台系统&#xff0c;前台系统指的是中断服务函数&#xff0c;后台系统指的是大循环&#xff0c;即应用程序。 1、实时性差&#xff1a;应用程序轮流执行 2、delay&#xff1a;空等待&#xff…...

Node的学习以及学习通过Node书写接口并简单操作数据库

Node的学习 Node的基础上述是关于Node的一些基础&#xff0c;总结的还行&#xff1b; 利用Node书写接口并操作数据库 1. 初始化项目 创建新的项目文件夹&#xff0c;并初始化 package.json mkdir my-backend cd my-backend npm init -y2. 安装必要的依赖 安装Express.js&…...

【Linux探索学习】第二十二弹——用户缓冲区:深入解析操作系统中数据交互时的缓冲区机制

Linux学习笔记&#xff1a; https://blog.csdn.net/2301_80220607/category_12805278.html?spm1001.2014.3001.5482 前言&#xff1a; 前面两章我们已经讲了一些文件操作和文件重定向问题&#xff0c;以及一些相关的知识点&#xff0c;比如文件在内存中的存储位置&#xff0…...

Cesium-(Primitive)-(CylinderOutlineGeometry)

CylinderOutlineGeometry 以下是 CylinderOutlineGeometry 类的构造函数属性,以表格形式展示: 属性名类型默认值描述lengthnumber圆柱体的长度。topRadiusnumber圆柱体顶部的半径。bottomRadiusnumber圆柱体底部的半径。slicesnumber128可选,圆柱体周长的边数。numberOfVert…...

【ETCD】【源码阅读】深入分析 storeTxnWrite.Put方法源码

该方法是 storeTxnWrite 类型中的核心方法&#xff0c;负责将键值对存储到数据库&#xff0c;同时处理键的元数据&#xff08;如版本、修订号、租约&#xff09;并管理租约关联。 目录 一、完整代码二、方法详解方法签名1. 计算修订号并初始化变量2. 检查键是否已存在3. 生成索…...

MySQL技术:深入理解索引与优化

MySQL是一个广泛使用的开源关系型数据库管理系统。它以其高性能、可靠性和易用性而闻名。在数据库操作中&#xff0c;查询优化是一个非常重要的环节&#xff0c;而索引是实现查询优化的关键技术之一。本文将深入探讨MySQL中的索引原理、类型以及如何优化索引以提高数据库性能。…...

【广东-东莞】《东莞市政府投资信息化项目造价指南》-省市费用标准解读系列26

2023年6月27日&#xff0c;东莞市发展和改革局发布《东莞市政府投资信息化项目造价指南&#xff08;试行&#xff09;》&#xff0c;此指南由东莞市政府投资项目评审中心编制&#xff0c;指南旨在完善东莞市为规范政府投资信息化项目造价计费方式&#xff0c;高质量、高效率推进…...

8、基于SpringBoot的房屋租赁系统

摘 要 社会的发展和科学技术的进步&#xff0c;互联网技术越来越受欢迎。网络计算机的生活方式逐渐受到广大人民群众的喜爱&#xff0c;也逐渐进入了每个用户的使用。互联网具有便利性&#xff0c;速度快&#xff0c;效率高&#xff0c;成本低等优点。 因此&#xff0c;构建符…...

SLM510A系列——24V,15到150mA单通道可调电流线性恒流LED驱动芯片

SLM510A 系列产品是单通道、高精度、可调电流线性恒流源的 LED 驱动芯片&#xff0c;在各种 LED 照明产品中非常简单易用。其在宽电压输入范围内&#xff0c;能保证极高的输出电流精度&#xff0c;从而在大面积的光源照明中&#xff0c;都能让 LED 照明亮度保持均匀一致。 由于…...

深度学习试题及答案解析(一)

1. 一幅256*256的图像&#xff0c;若灰度级数为16&#xff0c;则存储它所需的比特数是&#xff08;&#xff09; 2. 在深度学习中&#xff0c;涉及大量的矩阵相乘&#xff0c;现在需要计算三个稠密矩阵A&#xff0c;B&#xff0c;C的乘积ABC,假设三个矩阵的尺寸分别为m∗n&…...

【钉钉群聊机器人定时发送消息功能实现】

Java实现 钉钉群聊机器人定时发送消息功能 钉钉群聊准备工作钉钉发起群聊创建项目群打开钉钉群聊设置打开机器人管理选择Webhook机器人添加机器人安全设置保存Webhook地址&#xff08;重点是token&#xff09; 项目代码实现添加依赖启动类添加定时任务启动扫描编写调度任务定义…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...