简单来说，前端工程化是对前端开发流程的改良，是效率工具。
可以通过一下四个块来理解前端工程化
-
模块化：
就是将代码拆分，分成独立的单独的相互依赖的片段
首先说JS，CommonJS和ES Module都是JS模块化的一种表现形式，ES6 使用 import 和 export 来进行导入导出；CommonJS使用 require 和 module.exports 或 exports
CSS的话，是不支持选择器嵌套的，因此我们可以使用CSS预编译器（Less、Sass）去写CSS，然后在浏览器运行时候会被打包为CSS
HTML通常都是模块化的，服务端可以使用模版引擎（template），将数据注入到占位符中，在Vue框架中，通常使用template，React中可以使用TSX、JSX等
但是还有一个问题就是，不同资源无法组织在一起，这时就需要用到Webpack了，Webpack是一个模块打包工具，具有很高的可配置型和灵活性，可以配置相关的loader和plugins来优化我们的项目
-
组件化：
目前前端开发的主要思想就是组件化开发，组件是UI层面的更加细粒度的拆分，每个组件都有自己的HTML、CSS、JS，同时又有自己的状态，而且支持嵌入到其他组件中并接受外部数据
-
规范化：
即项目开发时一些通用式的规范，比如
目录结构的规定
代码的风格
代码注释
git 提交信息
接口封装规范
使用ESLint来检查代码等
使用TS来进行来避免类型错误等
-
自动化：
一个小概率事件只要做的次数足够多，它就会变成大概率事件。这也是为什么分布式系统中容错机制是非常重要的原因。
首先想到的自然是 CI/CD（持续集成和持续交付/部署）。我们将代码提交到远端仓库时，或者是给一个分支打了 tag 后，能够触发一些脚本，将我们的项目代码做打包编译，发布成制品，然后发布到生产环境。这些都是自动化的，流程化的。
CI/CD 工具有很多：Jenkins（比较古老了）、GitLab CI/CD、GitHub Action、Docker（发布制品） 和 k8s（容器编排）等。前面说的 git hook，在本地 commit 时进行一些操作，也算是一种简单的自动化。
打包工具
前端工程化的核心是打包工具。
打包工具需要支持的 几种重要的能力：
1.代码分割：指的将代码划分为可以按需 / 同时加载的多个bundles 或组件的能力。比如动态 import、提取公共依赖模块代码、多个入口文件没有重复代码、支持 ESM 的值引用模拟等。
2.哈希：资源更新时做哈希，防止资源缓存。哈希分很多种，比如文件路径名哈希、内容哈希等。
3.包引入：ES Module、CommonJS 以及从 node_modules 目录引入包的支持。
4.非 JS 资源：导入非 JS 资源的支持，像是 webpack 需要使用各种 loader 来支持，有些打包工具是内置的。
5.输出的模块格式：支持导出为 ES Module、CommonJS 等模块。
6.转换处理：比如对图片压缩、代码压缩、JS 版本降低等，在 webpack 中是使用 plugins 来实现的。
