1. 什么是前端工程化

• 定义：将前端开发流程系统化、工具化和标准化，以提升开发效率、代码质量和项目可维护性。
• 目标：
  • 降低开发和维护成本。
  • 提升团队协作效率。
  • 保证项目质量。

---

2. 前端工程化的核心要素

2.1 模块化

• 概念：将代码拆分为独立、可复用的模块。
• 实现方式：
  • CommonJS：Node.js 标准。
  • ES Module：现代浏览器标准。
  • AMD/UMD：用于兼容浏览器环境。
• 工具：Webpack、Rollup、Vite 等支持模块化打包。

2.2 组件化

• 概念：将页面划分为独立的功能组件，便于复用和管理。
• 技术栈：
  • React、Vue、Angular。
• 特点：
  • 视图、逻辑、样式封装。
  • 通过 props 和事件通信。

2.3 自动化

• 概念：通过工具减少手动操作，提高效率。
• 实现：
  • 构建自动化：Webpack、Vite。
  • 测试自动化：Jest、Cypress。
  • 部署自动化：CI/CD（如 GitHub Actions）。
  • 任务自动化：Gulp、npm Scripts。

2.4 标准化

• 概念：统一代码规范和开发流程，减少因风格不统一导致的协作问题。
• 实现方式：
  • 代码规范：ESLint、Prettier。
  • Git 规范：Commitlint、Husky。
  • 文档规范：统一 API 文档、注释风格。

---

3. 工程化工具链

3.1 包管理工具

• npm：Node.js 官方包管理工具。
• yarn：高效的包管理工具。
• pnpm：性能更优、去重的包管理工具。

3.2 构建工具

• Webpack：
  • 功能强大但配置复杂。
  • 支持 Tree-shaking、Code Splitting。
• Vite：
  • 基于 ES Module，启动快。
  • 支持 HMR（热模块替换）。
• Rollup：
  • 专注于库的打包。
  • 输出文件体积小。

3.3 测试工具

• 单元测试：Jest、Mocha。
• 端到端测试：Cypress、Puppeteer。
• 静态分析：ESLint、Stylelint。

3.4 CI/CD 工具

• Jenkins：功能强大的自动化构建工具。
• GitHub Actions：与 GitHub 无缝集成。
• GitLab CI/CD：GitLab 内置的持续集成工具。

---

4. Webpack 面试题

4.1 基础问题

• Webpack 的核心概念有哪些？
  • Entry：入口。
  • Output：输出。
  • Loader：文件解析器。
  • Plugin：扩展功能。
• 什么是 Loader？常用的 Loader 有哪些？
  • babel-loader：转译 ES6+ 语法。
  • css-loader：解析 CSS 文件。
  • style-loader：将 CSS 注入到 DOM。
  • file-loader 和 url-loader：处理文件或图片资源。
• 什么是 Plugin？常用的 Plugin 有哪些？
  • HtmlWebpackPlugin：生成 HTML 文件。
  • CleanWebpackPlugin：清理构建文件夹。
  • MiniCssExtractPlugin：提取 CSS 文件。
  • DefinePlugin：定义全局变量。

4.2 进阶问题

• 如何优化 Webpack 打包速度？
  • 使用 多线程/多进程：如 thread-loader。
  • 开启 缓存：cache-loader 或持久缓存。
  • 优化文件解析：resolve 配置（如 alias 和 extensions）。
  • 减少打包体积：合理使用 Tree-shaking 和 Code Splitting。
• 如何配置 Tree-shaking？
  • 确保使用 ES Module。
  • 在 package.json 中设置 "sideEffects": false。
• 如何实现按需加载？
  • 使用动态 import()。
  • 配置 Webpack 的 Code Splitting 功能。

4.3 原理问题

• Webpack 的热更新（HMR）原理是什么？
  • 利用 WebSocket 监听文件变化，替换内存中的模块。
• 什么是 Webpack 的 Chunk 和 Bundle？
  • Chunk：代码块，模块的逻辑组合。
  • Bundle：最终输出的打包文件。
• Webpack 中的 source-map 有哪些类型？区别是什么？
  • inline-source-map：嵌入代码中，开发效率高。
  • cheap-module-source-map：忽略列信息和 loader 映射，性能较好。
  • eval-source-map：每个模块独立生成映射，开发调试效率高。

---

5. 前端工程化实践

5.1 项目初始化

• 使用脚手架工具快速生成项目模板。
  • Vue CLI、Create React App、Vite 等。

5.2 开发环境

• 配置开发服务器（如 Vite、Webpack DevServer）。
• 使用模块热替换（HMR）提高开发效率。

5.3 生产环境

• 代码压缩：Terser、CSS Nano。
• 资源优化：Tree-shaking、Lazy Load。
• 静态资源版本化：通过 Hash 保证缓存更新。

5.4 持续集成与部署

• 使用 CI/CD 工具实现自动化测试和部署。
• 常见流程：
  • 拉取代码 -> 执行测试 -> 构建打包 -> 部署上线。

---

6. 前端工程化的优势与挑战

6.1 优势

• 提升开发效率和协作能力。
• 降低代码出错率，提高项目质量。
• 提高项目的扩展性和维护性。

6.2 挑战

• 工具链学习成本较高。
• 初期配置耗时，需要投入资源。
• 团队需达成一致的规范与流程。

---

7. 总结

• 核心：模块化、组件化、自动化、标准化。
• 目标：提升效率、降低成本、保证质量。
• 工具：合理选择工具链，持续优化开发流程。