当前位置: 首页 > 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; 项目代码实现添加依赖启动类添加定时任务启动扫描编写调度任务定义…...

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

(二)TensorRT-LLM | 模型导出(v0.20.0rc3)

0. 概述 上一节 对安装和使用有个基本介绍。根据这个 issue 的描述&#xff0c;后续 TensorRT-LLM 团队可能更专注于更新和维护 pytorch backend。但 tensorrt backend 作为先前一直开发的工作&#xff0c;其中包含了大量可以学习的地方。本文主要看看它导出模型的部分&#x…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库,而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例,演示如何: 使用 FetchContent 从 GitH…...

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

JVM虚拟机:内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...