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

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

判断一下是否注册成功

相关推荐
j7~44 分钟前
【Linux】三十八.C++ 手写 HTTP 服务器:裸 socket + fork 多进程,从 HTTP 报文解析到浏览器打开网页
linux·网络·网络协议·学习·http·网络编程
日拱一卒的小田1 小时前
ZYNQ学习笔记4-ZYNQ的SD卡控制器2
笔记·学习
江湖人称菠萝包1 小时前
【Qt】《Qt 5.9 C++开发指南》笔记-Chapter8-绘图
笔记·qt·qt5
xieliyu.1 小时前
JVM 垃圾回收机制详解:从标记过程、回收算法到垃圾收集器
java·jvm·笔记·java-ee
xieliyu.1 小时前
前端基础:常见CSS选择器用法
前端·css·笔记·vscode
周玉奎先生1 小时前
河南少商新材料CGM灌浆料:扎根河南工程现场的水泥基灌浆材料
经验分享·笔记·零售
外收内放1 小时前
Python与AI应用(项目开发实战:AI智能伴侣第一版)
python·学习·ai编程
へ蟲児.1 小时前
幼儿英语启蒙APP怎么选,专业性、适配性、实用性三大角度解读
学习
动词ing1 小时前
【学习笔记】动态规划+背包问题
笔记·学习
Hhy_11071 小时前
《C++深度解构04》类和对象(下)——类型转换、static、友元与编译器优化
c语言·c++·学习·类和对象·visual studio