
Webpack是每一个前端工程师都必须掌握的工具,我们掌握工具的前提是熟悉工具。所以了解一些其内部原理能够帮助我们更好的去分析实际业务中遇到的问题。
参考文档
- JELLY | Webpack原理浅析
- webpack编译流程
- 由浅至深了解webpack异步加载背后的原理 - 云+社区 - 腾讯云
- 一文掌握Webpack编译流程
- 手把手教你撸一个简易的 webpack
- 轻松理解webpack热更新原理
- Webpack 案例 ----vue-loader 原理分析_字节前端 ByteFE - MdEditor
- webpack loader 从上手到理解系列:style-loader
- webpack loader 从上手到理解系列:vue-loader
- 4-12 按需加载 · 深入浅出 Webpack
个人梳理
- 参考文章
JELLY | Webpack原理浅析
webpack编译流程
由浅至深了解webpack异步加载背后的原理 - 云+社区 - 腾讯云
一文掌握Webpack编译流程
手把手教你撸一个简易的 webpack
轻松理解webpack热更新原理
Webpack 案例 ----vue-loader 原理分析_字节前端 ByteFE - MdEditor
webpack loader 从上手到理解系列:style-loader
webpack loader 从上手到理解系列:vue-loader
4-12 按需加载 · 深入浅出 Webpack
Q1:Webpack构建流程

Q2:Webpack Loader原理
Q3:Webpack Plugin原理
Q4:Loader和Plugin的 区别
一、webpack的打包原理
- 识别入口文件
- 通过逐层识别模块依赖(Commonjs、amd或者es6的import,webpack都会对其进行分析,来获取代码的依赖)
- webpack做的就是分析代码,转换代码,编译代码,输出代码
- 最终形成打包后的代码
二、什么是loader
loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中
- 处理一个文件可以使用多个loader,loader的执行顺序和配置中的顺序是相反的,即最后一个loader最先执行,第一个loader最后执行
- 第一个执行的loader接收源文件内容作为参数,其它loader接收前一个执行的loader的返回值作为参数,最后执行的loader会返回此模块的JavaScript源码
三、什么是plugin
在webpack运行的生命周期中会广播出许多事件,plugin可以监听这些事件,在合适的时机通过webpack提供的API改变输出结果。
四、loader和plugin的区别
对于loader,它是一个转换器,将A文件进行编译形成B文件,这里操作的是文件,比如将A.scss转换为A.css,单纯的文件转换过程。
plugin是一个扩展器,它丰富了webpack本身,针对是loader结束后,webpack打包的整个过程,它并不直接操作文件,而是基于事件机制工作,会监听webpack打包过程中的某些节点,执行广泛的任务。
Q5:热更新原理
Q6:DLL
Q7:Tree-Shaking
Q8:Scope Hosting
Q9:异步加载组件
分包策略
Read more

1.5G到200M,TurboRepo Docker镜像优化指南:轻松打造轻量级镜像
最近往我的TurboRepo中添加了几个后端项目,然后使用Docker部署到服务器上,网上的TurboRepo的打包部署教程比较少,而且有些文章给的方法让Docker的镜像变得很大,所以我这里记录一下我是怎么减少镜像大小的。

治愈画风 | 吉卜力风格的Shadcn主题分享 附上安装教程
你是否也喜欢吉卜力动画那种温暖、治愈的风格?今天为大家推荐一个超级精美的 Shadcn UI 主题

Swift接入Apollo GraphQL并使用CLI生成代码
✏️ 笔者是GraphQL深度爱好者,在学习Swift开发过程中也希望能够将其引入,过程中也遇到一些包管理问题,参阅了官网文档后成功接入,下面是整个过程。