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

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

判断一下是否注册成功

相关推荐
一个平凡而乐于分享的小比特20 小时前
UCOSIII笔记(十四)时间戳
笔记·时间戳·ucosiii
YJlio20 小时前
ShareEnum 学习笔记(9.5):内网共享体检——开放共享、匿名访问与权限风险
大数据·笔记·学习
泽虞21 小时前
《STM32单片机开发》p7
笔记·stm32·单片机·嵌入式硬件
brave and determined21 小时前
接口通讯学习(day05):智能手机的内部高速公路:揭秘MIPI CSI与DSI技术
学习·智能手机·软件工程·制造·csi·mipi·dsi
FakeOccupational21 小时前
电路笔记(信号):网线能传多少米?网线信号传输距离
开发语言·笔记·php
Tonya431 天前
测开学习DAY37
学习
Yawesh_best1 天前
告别系统壁垒!WSL+cpolar 让跨平台开发效率翻倍
运维·服务器·数据库·笔记·web安全
roman_日积跬步-终至千里1 天前
【强化学习基础(2)】被动强化学习:学习价值函数
学习
逢考必过@k1 天前
6级550学习ing
学习