和大家聊聊我理解的前端构建

本篇内容主要和大家聊聊我对前端构建的一个认知过程，以及自己的一些思考。

我最初接触前端打包工具是 fis，后来又开始接触 webpack，以前关于前端构建理解的比较片面，那会也写过一篇文章：

统一管理多项目 webpack 配置文件

回顾了下我对前端构建的理解，主要经历这几个阶段：

第一阶段、刚接触前端构建

站在项目的角度做前端构建。直接在项目中创建一个 webpack 配置文件，该配置只能打包当前项目，无法迁移到其它项目中。每个项目中的 webpack 配置没有统一的规律。

这样做的缺点是，case by case，没形成统一的规范。如果一旦项目多了，每新建一个项目都要复制一个 webpack 配置，进行修改适配当前项目。

第二阶段、抽象 webpack 配置

站在全局的角度做前端构建。把 webpack 的配置抽象化，尽可能地让所有项目使用统一的配置。这篇文章 统一管理多项目 webpack 配置文件 就属于这个阶段。把 webpack 单独抽离一个 npm 包，每个项目可以复用这些 webpack 配置。配置如下：

如果项目中遇到一些独特的配置可以通过 webpack merge 进行合并。这种方式需要团队内部约定项目的目录结构，所有项目都按统一的目录结构。

第三阶段、独立成工具

站在未来的角度做前端构建。如果后面想升级打包构建工具咋么办？比如从 fis3 切换到 webpack，不得不把所有的项目模块进行一一升级。在第二阶段我们的配置文件叫 webpack.xxx.js：

如果升级成其它打包工具，比如升级成 vite，我们的配置文件总不能还叫 webpack.xxx.js 吧。

如何能够让后面的迁移成本更低？

下面分享下我的思路。

可以对打包构建过程进行一次「封装」，实现一个命令行工具，比如叫 sypack，在 package.json 中可以这样配置：

  "scripts": {
    "dev": "sypack dev",
    "build": "sypack build"
  }

配置文件叫做 sypack.config.js，它只负责做一些项目中独有的配置，因为项目一旦规范后（技术栈、目录结构），这个配置基本采用默认的配置即可。打包细节都交给 sypack 来实现，项目本身不必关心 sypack 使用的是 webpack、还是 vite。

采用这种方式，如果后面升级打包构建，只需修改 sypack 即可，其它项目只修改 sypack 的版本号即可。

前端项目千奇百怪，那么你的项目是如何做前端构建的呢？

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/