前端工程化简介

前端工程化包含从编码、发布到运维的整个前端研发生命周期

前端工程化的目标是提高研发效率、研发质量和访问性能

如：webpack、rollup、gulp、jest

主要解决的问题

传统语言或语法的弊端、无法使用模块化/组件化、重复的机械式工作、

代码风格统一质量保证、依赖后端服务接口支持、整体依赖后端项目

开发效率

• 前端脚手架工具

  1. package.json，依赖管理体系下的基础配置文件
  2. npm、yarn、pnpm 作为包管理器
  3. 确定技术栈，在 src 目录中建立入口源码文件
  4. 选择构建工具，主流选择 webpack
  5. 大同构建流程，安装各种 loader、plugins
  6. 优化构建流程
  7. 选择和调试辅助工具，例如代码检查、单元测试工具
  8. 编写 README、.ignore

• 如何正确使用 sourceMap？

构建效率

• webpack 的完整构建流程
• 如何为 webpack 编译阶段提速？
• 如何为 webpack 打包阶段提速
• 缓存的优化方案
• webpack 的增量构建

部署效率

构建前端脚手架

使用 yeoman 创建生成器

一个基本的复制已有项目模板的生成器包含了：

1. 生成器描述文件 package.json，其中限定了 name、file、keywords 等对应字段的规范
2. 作为主题的 generators/app 目录，包含生成器的核心文件。该目录是执行 yo 命令时的默认查找目录
3. app/index.js 是生成器的核心控制模块，其内容是导出一个继承自 yeoman-generator 的类，并由后者提供运行时上下文、用户交互、生成器组合等功能
4. app/templates/ 目录是复制到新项目中的脚手架模板目录

热更新技术如何开着飞机修引擎？

如何正确使用 sourceMap?

什么是 Source Map?

编写的源代码会经过多重处理（编译、封装、压缩等），最后形成产物代码

source-map 的基本原理

在编译处理的过程中，在生成产物代码的同时生成产物代码中被转换的部分与源代码中相应的映射关系表

通过 Chrome 控制台的“Enable JavaScript source map”来实现调试时的显示与定位源代码功能

webpack 的 source map 预设

。。。。

sourceMap 解决的问题

实际编写的代码与编译后的代码的转换

超全面的前端工程化配置指南 https://mp.weixin.qq.com/s/bOkgYaEJm6DlHBM_G_9Sng

知乎：什么是前端工程化

https://www.zhihu.com/question/433854153/answer/1618951221?utm_source=wechat_session&utm_medium=social&utm_oi=56197411504128&utm_content=group3_Answer&utm_campaign=shareopn

https://zhuanlan.zhihu.com/p/359734011

参考资料