【学习】前端工程化（webpack5）

前言

前端工程化是指将软件工程的思想、方法和技术系统化地应用于前端开发，通过规范化的流程、工具和最佳实践，提升开发效率、代码质量和项目可维护性。它的核心目标是解决复杂前端项目中的协作、维护、性能等问题，使开发过程更加标准化、自动化和可持续。

前端工程化的核心内容

1. 模块化开发

   • 代码模块化：将代码拆分为独立模块（如 ES Modules、CommonJS），降低耦合度。
   • 组件化：通过框架（React/Vue）将 UI 和逻辑封装为可复用的组件，提升开发效率。
   • 依赖管理：使用 npm、Yarn 或 pnpm 管理第三方库和版本控制。

2. 自动化工具链

   • 构建工具：Webpack、Rollup、Vite 等实现代码打包、压缩、转译（如 Babel 转 ES6+）。
   • 任务自动化：通过 Gulp、npm Scripts 自动执行代码检查、测试、部署等任务。
   • 脚手架：如 Create React App、Vue CLI 快速生成项目结构和配置。

3. 规范化体系

   • 代码规范：ESLint、Prettier 统一代码风格，Airbnb/Google 等预设规则。
   • 提交规范：Commitlint、Husky 约束 Git 提交信息格式（如 Conventional Commits）。
   • 目录规范：统一项目结构，提升可读性和协作效率。

4. 质量保障

   • 单元测试：Jest、Mocha 验证代码逻辑。
   • E2E 测试：Cypress、Playwright 模拟用户操作。
   • 代码审查：通过 Git Flow、Pull Request 机制保障代码质量。

5. 性能优化

   • 构建优化：Tree Shaking、代码分割（Code Splitting）减少打包体积。
   • 运行时优化：懒加载、缓存策略（CDN、Service Worker）提升加载速度。
   • 监控：通过 Lighthouse、Sentry 分析性能瓶颈和错误。

6. 持续集成与部署（CI/CD）

   • 自动化流水线：Jenkins、GitHub Actions 实现测试、构建、部署。
   • 容器化：Docker 统一环境，避免“本地正常，线上报错”。
   • 灰度发布：逐步上线新功能，降低风险。

Webpack 工程化常用配置和工具

1.基本配置

• 入口（Entry） ：指定应用的入口文件，Webpack 将从这个文件开始，分析依赖关系并打包。

• 输出（Output） ：定义打包后的文件输出路径和文件名。

• 模块加载（Modules） ：配置如何处理不同类型的文件（使用 loaders 处理，例如：JS 文件、CSS 文件、图片等）。

• 插件（Plugins） ：使用插件对构建过程进行增强（例如：压缩代码、生成 HTML 文件、提取 CSS 等）。

• 模式（Mode） ：定义构建模式，如开发模式（development）和生产模式（production），每种模式下，Webpack 会自动应用不同的优化。

2.常用loader和plugin

• Loaders：用于处理文件，转换文件内容，使其能够被 Webpack 理解和打包。

  • babel-loader：用于将 ES6/ES7+ 转换为兼容浏览器的 JavaScript。
  • css-loader：用于处理 CSS 文件，将其转换为 JavaScript 模块。
  • style-loader：将 CSS 插入到 DOM 中。
  • file-loader、url-loader：用于处理图像和字体等文件，打包成 URL 或将文件嵌入到代码中。
  • vue-loader: vue-loader是webpack的加载器，允许您以单文件组件（SFCs）的格式编写vue组件

• Plugins：插件扩展了 Webpack 的功能，帮助优化构建结果。

  • HtmlWebpackPlugin：用于生成 HTML 文件，并自动将打包后的 JS 文件注入到 HTML 中。
  • MiniCssExtractPlugin：提取 CSS 到独立的文件中，防止将 CSS 嵌入到 JavaScript 中。
  • TerserWebpackPlugin：用于压缩和优化 JavaScript 代码。
  • CleanWebpackPlugin：清理构建输出目录，删除旧的文件。
  • CSSMinimizerPlugin: 优化并压缩 css 资源。
  • ProvidePlugin:用于在代码中自动加载模块，可以减少模块导入的代码。
  • DefinePlugin:允许你在代码中定义常用变量，用于在开发和生产环境中切换配置。
  • HotModuleReplacementPlugin:HotModuleReplacementPlugin 用于实现热模块替换（Hot Module Replacement 简称 HMR)

3.分包策略

将大文件拆分成多个小文件，以实现更高效的加载。常见的代码分割方式包括：

• 入口点分割：根据入口点拆分不同的文件。
• 按需加载（Lazy Loading） ：动态加载模块，仅在需要时才加载相关代码。
• 公共模块提取：提取多个模块之间共享的代码，减少重复加载。

例如：

/**
     * 把 js 文件打包成3种类型
     * 1. vendor: 第三方 lib库，基本不会改动，除非依赖版本升级
     * 2. common：业务组件代码的公共部分抽取出来，改动较少
     * 3. entry.{page}: 不用页面 entry 里的业务组件代码的差异部分，会经常改动
     * 目的：把改动和引用频率不一样的 js 区分出来，以达到更好利用浏览器缓存的效果
     */
    splitChunks: {
      chunks: "all", //对同步和异步模块都进行分割
      maxAsyncRequests: 10, // 每次异步加载的最大并行请求书
      maxInitialRequests: 10, //入口点点最大并行请求书
      cacheGroups: {
        vendor: {
          // 第三方依赖库
          test: /[\\/]node_modules[\\/]/, // 打包node_modules 中的文件
          name: "vendor", //模块名称
          priority: 20, //优先级，数字越大，优先级越高
          enforce: true, // 强制执行
          reuseExistingChunk: true, // 复用已有的公共 chunk
        },
        common: {
          //公共模块
          name: "common", //模块名称
          minChunks: 2, //被两处引用即被归为公共模块
          minSize: 1, // 最小分割文件大小 （1 byte）：测试效果
          priority: 10, //优先级，数字越大，优先级越高
          reuseExistingChunk: true, // 复用已有的公共 chunk
        },
      },
    },

4. 热更新（Hot Module Replacement，HMR）

通过 Webpack 提供的 HMR，开发过程中，当代码发生变化时，页面无需重新加载，就能直接更新相应的模块，提高开发效率。

热更新是指在开发环境中，当代码发生变化（如保存文件）时，浏览器可以在不刷新整个页面的情况下，动态地更新变化的模块

• 监控文件变化:Webpack的开发服务器会监控项目中所有的模块文件,包括:JS文件、CSS文件、模板文件等。

• 模块热替换:当你在代码中做出更改并保存时,Webpack检测到文件变化,会首先通过热替换插件(Hot Module Replacement Plugin)生成新的模块代码

• 构建更新的模块:生成的新模块代码会被构建成一个独立的文件或数据块。

• 通知客户端:Webpack开发服务器会将更新的模块代码的信息发送到浏览器。

• 浏览器端处理:浏览器接收到更新的模块信息后,会在不刷新页面的情况下通过热替换运行时(HotModule Replacement Runtime）替换相应的模块。

• 应用程序状态保持:热更新还可以保持应用程序的状态。当修改代码不会丢失已有的数据、用户登录状态等。

• 回调处理:允许在模块更新时执行自定义的回调函数,可以处理特定的逻辑,以确保模块更新后的正确性。

总结

前端工程化是一个重要的概念, 它可以帮助我们实现前端开发的高效性和质量, 但是我们不应该盲目的使用现有的工程化方案, 而是应该了解工程化的思想。当我们掌握思想之后，任何的工具都可以帮我们实现。

注：抖音 “哲玄前端”，《大前端全栈实践课》