《玩转Webpack》学习笔记之第三章(下)Day6

108 阅读1分钟

##33讲 webpack打包组件和基础库

webpack除了可以用来打包应用,也可以用来打包js库

rollup更加适合打包js库,更加纯粹,但是webpack很强大的功能,也用webpack打包

实现一个大整数加法库的打包

  1. 需要打包压缩版(开发阶段)和非压缩版本(业务阶段)
  2. 支持AMD/CJS/ESM模块引入

库的目录结构和打包结构

image.png

支持的使用方式

image.png

image.png

如何将库暴露出去

image.png

image.png

webpack网站里可以查看这些元素

如何指对.min压缩

image.png

设置入口文件

image.png

发布:npm publish

第34和35讲 webpack实现SSR打包

image.png

服务端渲染(SSR)是什么?

渲染:HTML + CSS + JS + Data -〉 渲染后的HTML

服务端: 所有模版等资源都存储在服务端 内网机拉取数据更快 一个HTML返回所有数据

浏览器和服务器交互流程

image.png

客户端渲染vs服务端渲染

image.png

SSR的优势

  1. 减少白屏时间
  2. 对于SEO友好

SSR代码实现思路

image.png

参考

极客时间 程柳锋《玩转webpack》33讲