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

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

判断一下是否注册成功

相关推荐
疯狂打码的少年2 小时前
【数据库技术】关系模型基本概念(关系/属性/元组/键)
java·服务器·数据库·笔记
Bruce_Liuxiaowei3 小时前
从基础理论开始学习人工智能(三):盲目搜索——从状态空间图到生成-测试范式
人工智能·学习
有梦想的骇客4 小时前
PyTorch学习笔记
pytorch·笔记·学习
Capricorn19884 小时前
个人知识库接入大模型频现“幻觉引用”?排查 RAG 溯源失效问题,解析知芽构建可信第三大脑的底层架构
大数据·论文阅读·人工智能·笔记·架构·论文笔记
陈年老古董5 小时前
深度学习入门笔记:从神经元到深度神经网络
人工智能·笔记·深度学习·神经网络·学习
2601_967100426 小时前
护眼灯哪个牌子更好更专业耐用?专业长效护眼台灯品牌推荐,品质过硬
学习·护眼·台灯
疯狂打码的少年6 小时前
【数据库技术】关系完整性约束(实体/参照/用户定义)
运维·服务器·数据库·笔记
微露清风6 小时前
快慢指针算法学习记录
学习·算法·快慢指针
sunshine22 girl7 小时前
Angular7,9,学习笔记四 父子组件传值,组件之间传值
笔记·学习
蒸蒸yyyyzwd8 小时前
cpp选手秋招学习笔记 day18
笔记·学习