【webpack】技巧使用
webpack和TypeScript
- 安装webpack相关内容
- 安装TS相关内容
- 配置初始化数据
- 初始化运行展示和目录展示
- 报错解决(缺失文件配置)
- 安装前端必备神奇lodash测试一下
- entry配置
- index.html模板配置
- 修改打包出来的index.html的title
- inject注入
- chunks 属性
- 多页面配置
- Tree Shaking-(摇晃无用代码)
- sideEffects属性
- 渐进式网络应用程序PWA
- PWA
- Shimming预置全局变量
- 细粒度Shimming-转换this的指向
- 全局Exports
安装webpack相关内容
- npm init -y,自动建立package.json
- npm install webpack webpack-cli npm install webpack-dev-server html-webpack-plugin -D
安装TS相关内容
- npm i typescript ts-loader -D
配置初始化数据
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: './src/app.ts',module: {rules: [{test: /\.ts$/,use: 'ts-loader',exclude: /node_modules/,},],},resolve: {extensions: ['.ts', '.js'],},output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist'),},plugins: [new HtmlWebpackPlugin()],
};
初始化运行展示和目录展示
- npx webpack

报错解决(缺失文件配置)
- npx tsc --init
- 自动创建tsconfig.json
- 配置一下:


- 到此,执行npx webpack 即可打包成功

安装前端必备神奇lodash测试一下
- npm i lodash -D
- 当你使用相关包,包类型报错的时候
- 原因:缺少ts 相关类型文件
- ts相关类型文件搜索查看引用命令

- npm install --save-dev @types/lodash

entry配置
- 当入口文件不止一个的时候,想多个文件打在一个里面的时候

- 当想单独打成文件的时候
- 缺点:这个做法相当于lodash自己打一遍,但ap.ts里有使用会再打一遍,最终main.js体积也会变大

- 抽离一下lodash
- 目的:使main.js体积变小

index.html模板配置
- 没有配置的时候打包出来的index.html

- 配置一下
- 新建index.html

- 导入模块

修改打包出来的index.html的title
- 步骤一,将index.html中改为
- webpack内置的属性获取标题

<title><%=htmlWebpackPlugin.options.title %>
</title>
- 步骤2;

- 成果展示

inject注入
chunks 属性
-
没配置前,默认全部
-
有几个入口,引用几个

-
配置图

-
配置后,只留下配置的

多页面配置
- 注意点:多页面配置filename属性要有,且不同
- filename如果配置成:“/sh_pc/index.html”,打出的包会在文件夹sh_pc下
plugins: [new HtmlWebpackPlugin({title: '乞力马扎罗',template: './index.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'index.html',chunks: ['main'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径}),new HtmlWebpackPlugin({title: '罗马迪克',template: './index2.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'index2.html',chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径}),],
- 优化后:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode: 'development',entry: {main: {import: ['./src/app.ts', './src/app2.ts'],dependOn: 'lodash',},lodash: {import: 'lodash',},},module: {rules: [{test: /\.ts$/,use: 'ts-loader',exclude: /node_modules/,},],},resolve: {extensions: ['.ts', '.js'],},plugins: [new HtmlWebpackPlugin({title: '乞力马扎罗',template: './index.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'sh_pc/index.html',chunks: ['main'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8080/', // 可以配置打包出来的index.html的路径}),new HtmlWebpackPlugin({title: '罗马迪克',template: './index2.html',inject: 'body', // 可以表示这个注入到哪个层filename: 'sh_oc/index2.html',chunks: ['lodash'], //可以配置打包出来的index.html只能引入哪个publicPath: 'http://lochost:8081/', // 可以配置打包出来的index.html的路径}),],output: {clean: true,},
};
Tree Shaking-(摇晃无用代码)
-
Tree-shaking的本质是消除无用的js代码
-
用到啥才会打包啥

-
看一下区别:


-
虽然引入了lodash,但未使用,所以打出来的包里面的lodash被摇晃掉了


sideEffects属性
- 在package.json中进行配置,即匹配到的任何css文件都不进行Tree Shaking

渐进式网络应用程序PWA
- 非离线状态运行
- 借助第三方包
- npm i http-server -D
- 配置一下运行脚本
- npm start

-当他成功启动后,页面展示, 但当你把服务器挂掉,页面就不展示

- 一般来说,启动服务是不会更新包里面的内容,如果你想更新内容

PWA
- 离线状态运行
- 先安装
- npm i workbox-webpack-plugin -D
- 再配置

- 再运行

- 页面上监听一下游览器是否支持离线运行
- 想要清除这个离线状态
- 访问chrome://serviceworker-internals/上点一下Unrefister即可
console.log('乞力马扎罗');
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then((registration) => {console.log('service-worker registed');}).catch((error) => {console.log('service-worker registed error');});});
}
- npm start

Shimming预置全局变量
- 旧代码

- 新项目
- 本来会报错,但通过预置全局变量配置了就不会
- 配置完,lodash就是全局的了

- 这样配置即可

细粒度Shimming-转换this的指向
- 有些模块的this指向window对象
- 但实际我们的CommonJS项目中this指向指向的实际位置不是
- 解决方法:
- 通过使用imports-loader覆盖this指向
- 目前问题:


- 解决步骤一:
- npm i imports-loader
- 步骤二:配置

全局Exports
- 第三方模块,你不清楚他是如何导出的
- 故你想使用,但不想导入,想直接使用里面的方法
- 步骤一
- npm i exports-loader -D
- 步骤二
- 新建要导入的文件gloabls.js
const file = '公共的';const helpers = {parse() {console.log('方法');},
};
- 步骤三
- webpack.config.js里面配置

- 步骤四 页面中使用


相关文章:
【webpack】技巧使用
webpack和TypeScript 安装webpack相关内容安装TS相关内容配置初始化数据初始化运行展示和目录展示报错解决(缺失文件配置) 安装前端必备神奇lodash测试一下entry配置index.html模板配置修改打包出来的index.html的titleinject注入chunks 属性多页面配置 …...
windows 谷歌浏览器Chrome 怎么禁止更新
1.首先把任务管理器里的谷歌浏览器程序结束: (鼠标在任务栏右击,出现任务管理器) 2.windowr,输入services.msc 带有Google Update的服务,选择禁用。 3.windowr,输入taskschd.msc 任务计划程序…...
力扣(leetcode)第349题两个数组的交集(Python)
349.两个数组的交集 题目链接:349.两个数组的交集 给定两个数组 nums1 和 nums2 ,返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序 。 示例 1: 输入:nums1 [1,2,2,1], nums2 [2,2] 输出…...
python Flask 写一个简易的 web 端程序(附demo)
python Flask 写一个简易的 web 端程序 (附demo) 介绍简单介绍装饰器 app.route("/") 进阶增加接口设置端口 静态网页核心代码完整代码 介绍 Flask 是一个用于构建 Web 应用程序的轻量级 Python Web 框架。它设计简单、易于学习和使用&#x…...
mysql问题
面试官:MySQL中,如何定位慢查询? 候选人: 嗯~,我们当时做压测的时候有的接口非常的慢,接口的响应时间超过了2秒以上,因为我们当时的系统部署了运维的监控系统Skywalking ,在展示的报表中可以看…...
iframe通信,window.postMessage父子项目数据通信
父 > 子 父项目 <iframe:src"cockpitUrl"id"cockpitIframe"load"handleLoad" ></iframe>// 向子系统传递数据(注意要再iframe的load中注册,保证iframe已经加载完成,这样子项目才能监听到&…...
ES6中新增Array.from()函数的用法详解
目录 Map对象的转换 Set对象的转换 字符串的转换 类数组对象的转换 Array.from可以接受三个参数 ES6为Array增加了from函数用来将其他对象转换成数组。当然,其他对象也是有要求,也不是所有的,可以将两种对象转换成数组。 1、部署了Iter…...
Camera2+OpenGL ES+MediaCodec+AudioRecord实现录制音视频写入H264 SEI数据
记录一下学习过程,得到一个需求是基于Camera2OpenGL ESMediaCodecAudioRecord实现录制音视频。 需求: 在每一帧视频数据中,写入SEI额外数据,方便后期解码时获得每一帧中的自定义数据。点击录制功能后,录制的是前N秒至…...
C语言笔试题之反转链表(头插法)
实例要求: 1、给定单链表的头节点 head ;2、请反转链表;3、最后返回反转后的链表; 案例展示: 实例分析: 1、入参合理性检查,即head ! NULL || head->next ! NULL;2、while循环…...
WEB3:互联网发展的新时代
随着科技的飞速发展,互联网已从最初的信息交流平台发展为涵盖了工作、生活、娱乐、教育等众多领域的复杂系统。我们将其称之为“WEB3”,这个名称是对互联网新时代的高度概括,标志着我们已经迈入了WEB3时代。 在WEB3时代,互联网将…...
c语言:贪吃蛇的实现
目录 贪吃蛇实现的技术前提: Win32 API介绍 控制台程序(console) 控制台屏幕上的坐标 GetStdHandle GetConsoleCursorInfo CONSOLE_CURSOR_INFO SetConsoleCursorInfo SetConsoleCursorPosition GetAsyncKeyState 宽字符的打印 …...
第5课 使用FFmpeg将rtmp流再转推到rtmp服务器
本课对应源文件下载链接: https://download.csdn.net/download/XiBuQiuChong/88801992 通过前面的学习,我们已经可以正常播放网络rtmp流及本地mp4文件。这节课,我们将在前面的基础上实现一个常用的转推功能:读取rtmp流或mp4文件并…...
Vue中v-if和v-show区别
Vue中v-if和v-show是两个常用的指令,用于控制元素的显示和隐藏。虽然它们都能达到相同的效果,但在实现机制和使用场景上有一些区别。本文将详细介绍v-if和v-show的区别,并且通过示例代码来演示它们的使用。 首先,让我们来看一下v…...
LabVIEW与EtherCAT实现风洞安全联锁及状态监测
LabVIEW与EtherCAT实现风洞安全联锁及状态监测 在现代风洞试验中,安全联锁与状态监测系统发挥着至关重要的作用,确保了试验过程的安全性与高效性。介绍了一套基于EtherCAT总线技术和LabVIEW软件开发的风洞安全联锁及状态监测系统。该系统通过实时、可靠…...
PostgreSQL的wal文件回收问题
引子 将PostgreSQL的GUC参数wal_recycle设置为on,然后对数据库执行一定业务量的操作,会发现在pg_wal目录下,有很多未来使用的wal文件,且创建时间比现在正在使用的wal文件更早,下文将描述和分析这种情况。 问题描述 …...
java-JUC并发编程学习笔记05(尚硅谷)
我们写一段测试代码: 会出现线程不安全的问题。 使用Vector解决线程不安全问题: 但是这个类几乎不会被使用了,因为效率太低。 方法二:通过Collections解决: 但是这种方案实际中也不太会使用。 我们还有第三种方法使用CopyOnWri…...
vulhub中spring的CVE-2022-22947漏洞复现
Spring Cloud Gateway是Spring中的一个API网关。其3.1.0及3.0.6版本(包含)以前存在一处SpEL表达式注入漏洞,当攻击者可以访问Actuator API的情况下,将可以利用该漏洞执行任意命令。 参考链接: https://tanzu.vmware.c…...
网络原理TCP/IP(1)
文章目录 端口号UDP协议 在网络通信中,协议非常重要 协议进行了分层 应用层就是对应着应用程序,是程序员打交道最多的这一层,调用系统提供的网络api写出来的代码都是属于应用层的 应用层有很多现成的协议,但是更多的还是程序员需要…...
EasyExcel使用,实体导入导出
简介 Java解析、生成Excel比较有名的框架有Apache poi、jxl。但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢出的问题,但POI还是有一些缺陷,比如07版Excel解压缩以及解压后存储都是在内存中…...
让IIS支持SSE (Server Sent Events)
本文只探讨IISPython网站的情况,对于asp.net也应该不用这么麻烦。 先上结论:用反向代理: IIS URL Rewrite waitress Waitress是一个纯python编写独立的WSGI服务器,功能比Gunicorn弱一些,但可以运行在windows平台上&…...
Ubuntu系统下交叉编译openssl
一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机:Ubuntu 20.04.6 LTSHost:ARM32位交叉编译器:arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
阿里云ACP云计算备考笔记 (5)——弹性伸缩
目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
HTML 列表、表格、表单
1 列表标签 作用:布局内容排列整齐的区域 列表分类:无序列表、有序列表、定义列表。 例如: 1.1 无序列表 标签:ul 嵌套 li,ul是无序列表,li是列表条目。 注意事项: ul 标签里面只能包裹 li…...
NFT模式:数字资产确权与链游经济系统构建
NFT模式:数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新:构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议:基于LayerZero协议实现以太坊、Solana等公链资产互通,通过零知…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...
【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)
前言: 双亲委派机制对于面试这块来说非常重要,在实际开发中也是经常遇见需要打破双亲委派的需求,今天我们一起来探索一下什么是双亲委派机制,在此之前我们先介绍一下类的加载器。 目录 编辑 前言: 类加载器 1. …...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件(6类核心文件) 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
