开发环境注重开发效率，生产环境注重运行效率
- 开发环境所使用的 soucre map 和 HMR 等 webpack 特性会生成或向打包文件中添加一些生产环境用不到的内容
- 针对这个问题，webpack4 推出了模式(mode)，它提供了不同模式下的预设配置
- 其中 production 模式内部开启了很多通用的优化功能
- 同时，webpack 也建议开发者为不同的工作环境创建不同的配置，以便于打包结果适用于不同的环境
2025/1/21大约 26 分钟...
webpack 增强开发体验
2025/1/20大约 21 分钟...
webpack 插件机制
相关信息
- loader 专注实现资源模块的加载，从而实现整体项目的打包
- plugin 解决项目中除了资源加载以外的自动化工作
2025/1/17大约 7 分钟...
webpack 资源模块加载
- webpack 内部(loader)默认只会处理 JavaScript 文件
- 也就是说它会把打包过程中所有遇到的文件当作 JavaScript 文件去解析
- 可以为其他类型的文件添加不同的加载器(loader)
2025/1/17大约 11 分钟...
什么是 Virtual DOM
- Virtual DOM（虚拟 DOM），是由普通的 JS 对象来描述 DOM 对象
- 真实 DOM 成员
2025/1/14大约 23 分钟...
学习目的
- 了解响应式原理，从原理层面解决实际项目中的问题
- 给 Vue 实例新增一个成员是否是响应式的？
- 给属性重新赋值成对象，是否是响应式的？
- 学习 Vue 响应式原理，为学习 Vue 源码做铺垫
2025/1/12大约 30 分钟...
vue-router 基础回顾
- 使用 vue-cli 创建一个 vue 应用，创建时选择 router 插件，自动生成 vue-router 的基础代码结构，先选择使用 hash 模式
2024/12/27大约 22 分钟...
gulp 与 grunt 的不同
重要
- gulp 相比 grunt 更简洁，而且 ，维护 gulp 更像是写代码
- gulp 相比 grunt 更有设计感，
- gulp 的每个插件只完成一个功能，这也是 Unix 的设计原则之一，各个功能通过流进行整合并完成复杂的任务
- 例如：grunt 的 imagemin 插件不仅压缩图片，同时还包括缓存功能
- 在 gulp 中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性
- 目前官方列出的有4206个插件
- gulp 的核心 API 只有14个，掌握了14个 API 就学会了 gulp，之后便可以通过管道流组合自己想要的任务
- 使用 grunt 的 I/O 过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件
- 而使用 gulp 的优势就是 ，流程更清晰，更纯粹
- 维护 gulp 更像是写代码，而且 gulp 遵循 CommonJS 规范，因此跟写 Node 程序没有差别
2021年4月7日大约 18 分钟...
什么是自动化构建
重复的工作都应自动化
- 开发行业中的自动化构建，就是把开发中写的源代码自动转换成可以在生产环境中运行的代码
- 一般把这个转换过程称为自动化构建工作流，作用是让开发者脱离运行环境兼容带来的种种问题，在开发阶段使用一些提高效率的语法规格和标准
- 典型应用场景，开发网页应用时可以使用
- ECMAScript Next 新语法提高编码效率和代码质量
- Sass 增强 css 的可编程性
- 模板引擎抽象页面中重复的 html
- 通过自动化构建工具可以将上述不被浏览器支持的特性转换成能够直接运行的代码
2021年3月8日大约 5 分钟...