JavaScript前端构建工具的工作原理究竟是如何实现模块化、压缩和优化的？

本文共计393个文字，预计阅读时间需要2分钟。

目录+前言+构建工具的前世今生+YUI+Tool++Ant+Grunt+/+Gulp+Webpack+/+Rollup+/+Parcel+Vite+/+Esbuild+js+模块化的发展历程和构建工具的演变+青铜时代+白银时代+黄金时代+结束语+前言+最近有兴在前端团队

目录

• 前言
• 构建工具的前世今生
• YUI Tool + Ant
• Grunt / Gulp
• Webpack / Rollup / Parcel
• Vite / Esbuild
• js 模块化的发展史和构建工具的变化
• 青铜时代
• 白银时代
• 黄金时代
• 结束语

前言

最近有幸在前端团队里面做了一次关于 webpack 的技术分享。在分享的准备过程中，为了能让大家更好的理解 webpack，特意对市面上以前和现在流行的构建工具做了一个梳理总结。在整理和分享的过程中，获益匪浅，对前端构建工具有了新的认识。在这里，将自己的一些思考总结写出来，希望也能给到对构建工具同样感兴趣的同学一点帮助。

本文的目录结构如下:

• 构建工具的前世今生
• js 模块化的发展史和构建工具的变化
• 结束语

构建工具的前世今生

谈到构建工具，大家首先想到的肯定就是 Webpack 以及现在最