跳到主要内容

构建工具

当前流行的构建工具有很多，以下举例一些常见的构建工具：

  • Webpack：静态化的模块打包工具，能够应用于各类复杂的项目，同时兼容性较好。
  • Vite：目前现代化工程的首选，相比于Webpack，它更加轻量化、速度更快、配置简单，但兼容性不如Webpack。
  • Rollup：主要面向类库的打包工具，可以将多个模块打包成一个文件，适用于库的发布。
  • Gulp：是一个基于流的自动化构建工具，可以自动执行重复性任务，比如压缩、编译、合并、测试等。
  • Grunt：是一个基于任务的自动化构建工具，可以自动执行多种任务，比如压缩、编译、合并、测试等。
  • Parcel：是一个快速、零配置的打包工具，可以将各种资源模块化，并自动化处理依赖关系，比如压缩、编译、合并、测试等。

WebPack​

WebPack大致可以分为几个比较主要的部分:

  • Entry：指示Webpack从哪里开始打包，可以是单个文件，也可以是多个文件。
  • Output：指示Webpack在哪里输出打包后的文件，可以是文件系统，也可以是内存中。
  • Loaders：Webpack可以加载各种文件类型，比如图片、字体、CSS、JavaScript等，通过Loaders可以对这些文件进行预处理，比如将Sass编译成CSS，将TypeScript编译成JavaScript等。
  • Plugins：Webpack可以用Plugins来扩展其功能，比如打包优化、分离CSS、提供环境变量等。
  • Mode：development（开发默认优化）、production（压缩与生产优化）、none（不启用上述两套默认优化，但仍在使用 Webpack 打包）。

WebPack的构建流程​

  1. 读取配置文件webpack.config.js，解析出入口文件、输出文件、加载器、插件等配置。
  2. 加载入口文件，解析其依赖关系，递归地解析每个依赖文件，直到所有入口文件都被解析完毕。
  3. 对每个模块进行编译，将其转换成浏览器可识别的JavaScript代码。
  4. 调用所有配置的插件进行处理，比如压缩、分离CSS、提供环境变量等。
  5. 将处理后的模块输出到指定的输出文件或内存中。 WebPack都是基于Node.js去完成静态解析和代码构建的，因此，我们在开发环境下使用开发服务器去进行开发任务，Webpack只是将构建文件输出到了内存中，开发服务器读取构建文件并提供服务。

Vite​

Vite 高度依赖浏览器原生 ES Module。开发期由 dev server 按需转换浏览器请求到的模块；依赖预构建常用 esbuild。生产默认用 Rollup 做打包优化。它与 Webpack“先构建完整依赖图再提供服务”的开发模型不同。

Vite 的开发流程（简化）​

  1. 读取 vite.config.js。
  2. 启动开发服务器，监听文件变化。
  3. 浏览器按需请求模块；服务器拦截并即时转换后返回。
  4. HMR 尽量只替换受影响模块；边界失效时整页刷新。

更细的对比见随记：Webpack vs Vite。