打包工具

1. 认识 vite Vite 是一个现代化的前端构建工具。它提供了快速的冷启动和热模块替换（HMR），使得开发体验更加流畅和高效 它由两部分组成： 一个开发服务器：基于原生 ES 模块提供了丰富的内

Rollup 是一个 js 的模块化打包工具，可以编译小的代码到一个大的、复杂的代码中，比如一个库或者一个应用程序 webpack 也是模块化打包工具，两者的区别在于 Rol

gulp 和 webpack Gulp 和 Webpack 都是现代前端开发中常用的自动化构建工具，但它们有着不同的侧重点和使用场景 Gulp 是一个基于流的自动化构建工具，它通过配置一系列的任务（t

Webpack 插件是一种可扩展的机制，允许你对 Webpack 构建过程中的不同阶段进行操作和调整。这些插件可以在 Webpack 的生命周期的不同点被触发，从而让你能够实现各种自动化任务，比如优化

自定义 loader loader 本质上是一个导出为函数的 js 模块，函数会接受三个参数 content：资源文件的内容 map：sourcemap 相关的数据 meta：一些元数据 loader

压缩相关：涉及js、css、html Tree Shaking相关：涉及 js、css HTTP文件压缩 webpack 打包分析

本节主要包括：代码分离（多入口、入口依赖、动态导入、预加载）、CDN服务器加速、提取 css 文件、认识hash、contenthash、chunkhash

背景 日常项目开发中，不说本地开发，在测试环境和线上环境运行的代码都是打包压缩后的，也就是转换后的代码 当代码报错需要调试时，调试转换后的代码是很困难的，比如下面： 可以看到，报错定位到的是打包后的文

是什么 前端开发中，会用到各种代码写法，比如ES6模块化、commonjs模块化、TypeScript、Less、Sass等等，这些都是不能被浏览器所识别运行的，webpack 打包工具的其中一项功能