Webpack学习笔记(8)

多页面应用

entry

entry可以配置为字符串、数组、对象(可以分开打包)

上图,app2.js和app.js会打包到一个文件main.js中;lodash会被打包到lodash.js。

如果app2.js和app.js使用了lodash,为之增加依赖,lodash单独打包,app3也依赖lodash并单独打包:

使用htmlwebpackplugin可以实现模板的自定义:

index.html为模板,在index.html中可以获取,inject为生成scripts等引入标签放在<body>位置,chunks为打包的文件:

不同页面不同打包:

指定打包文件位置:

Tree shaking

用于描述移除未引用的代码(死代码),内部方法如果没有使用则不打包,第三方库引入就会打包

sideEffects

true:所有代码都有副作用,不要随意删除(默认)

false:可以删除;

数组:存放有副作用的:下图即css文件有副作用。

渐进式网络应用程序PWA

非离线环境下运行

重新启动服务时,在dist生成新代码:

添加workbox

npm i workbox-webpack-plugin -D:

clientsClaim快速启用service-worker

skipWaiting跳出等待,不允许留下任何旧的service-worker

注册service worker

实现离线浏览页面的功能(浏览器将页面缓存了)

判断一下是否注册成功

相关推荐
崎岖Qiu9 分钟前
【OS笔记40】:设备管理 - 通道控制方式
笔记·操作系统·dma·os
自不量力的A同学34 分钟前
Midjourney 推出面向动漫领域的图像生成模型:Niji V7
笔记
狐5736 分钟前
2026-01-12-云计算速成课-期末复习
笔记·云计算·期末复习
saoys42 分钟前
Opencv 学习笔记:形态学开 / 闭运算(解决噪点与孔洞问题)
笔记·opencv·学习
小猪佩奇TONY1 小时前
Linux 内核学习(16) --- linux x86-64 虚拟地址空间和区域
linux·运维·学习
深蓝海拓1 小时前
PySide6,QEventLoop.exec()的使用
笔记·python·qt·学习·pyqt
开开心心_Every1 小时前
离线黑白照片上色工具:操作简单效果逼真
java·服务器·前端·学习·edge·c#·powerpoint
爱喝水的鱼丶1 小时前
SAP-ABAP:SAP性能侦探:STAD事务码的深度解析与应用实战
开发语言·数据库·学习·sap·abap
专注于大数据技术栈1 小时前
java学习--Collection
java·开发语言·学习
hetao17338371 小时前
2026-01-09~12 hetao1733837 的刷题笔记
c++·笔记·算法