这是我参与「第四届青训营 」笔记创作活动的的第2天
打包工具的作用
我认为打包工具的作用其实很简单，就是做了一些项目上线前的准备工作。比如，一些预处理的工作，就是将各种文件压缩整合并做一些针对性质的优化和转换, 这样浏览器就可以通过少量的HTTP请求获取想要的适配的前端资源了。
常见打包工具
Webpack, Vite, Rollup, ESBuild and Parcel
Webpack
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。
它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
Webpack五个核心概念
-
Entry：指示 Webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
-
Output：指示 Webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
-
Loader：Webpack 只能理解 JavaScript 和 JSON 文件，这是 Webpack 开箱可用的自带能力。loader 让 Webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
-
Plugins：可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。
-
Mode：指示 Webpack 使用相应模式的配置。
Webpack的一个小梳理
- Webpack能处理js/json资源，不能处理css/img等其他资源
- 能将 es6 的模块化语法转换成浏览器能识别的语法
- 不能将 js 的 es6 基本语法转化为 es5 以下语法
- 生产环境比开发环境多一个压缩js代码
Vite
Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
一个开发服务，服务于开发环境，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，服务于生产环境，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
为什么要使用Vite?
这主要是因为老的前端打包构建工具的一些已知问题：
- 缓慢的服务启动
当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。（影响开发体验） - 缓慢的更新
基于打包器启动时，重建整个包的效率很低。原因显而易见：因为这样更新速度会随着应用体积增长而直线下降。
Vite的内建功能相对Webpack
- webpack
- webpack-dev-server
- css-loader
- style-loader
- less-loader sass-loader
- postcss-loader
- file-loader
- MiniCssExtractPlugin
- HTMLWebpackPlugin
Vite初体验
在终端中运行 npm create vite 并选择对应前端框架和预设：
对应生成代码目录结构：
编写代码，运行启动命令 npm run dev ，可见启动项目速度之快
Rollup
Rollup 是一个 JavaScript 模块打包器，可以将小块代码编译成大块复杂的代码，例如 library 或应用程序。
这些标准都包含在 JavaScript 的 ES6 版本中，而不是以前的特殊解决方案，如 CommonJS 和 AMD。ES6 模块可以使你自由、无缝地使用你最喜爱的 library 中那些最有用独立函数，而你的项目不必携带其他未使用的代码。
