webpack 与 打包工具开发

webpack核心配置

Entry

Module

Plugin

MiniCssExtractPlugin

用于提取css样式内容

Resolve

用于解析

Output

grunt、gulp 15、16年

新晋打包工具

发展史

1、2009，commonjs，Modules/1.0；
2、2011，为commonjs引入异步加载特性，Module/Transfer/C 提案，独立成AMD规范；
3、2013，grunt、gulp，基于任务的自动化构建工具；
4、2014，定义跨平台的模块规范，定义了一个新的规范，叫做UMD；
5、2014，将ES6 -> ES5的工具，命名为babel；
6、2014，systemjs问世，简化了模块加载和处理的过程；
7、2014，Webpack问世，基于模块化的打包工具；
8、2015，正式ES6（ECMAScript 2015）规范正式发布
9、2015，Rollup，因为ES6的发布，借用ESModul，提出了tree-shaking的概念；
10、2017，webpack逐渐让人厌倦，Parcel问世，零配置的打包工具；
11、2019，snowpack出现 node_modules转ESM构建工具出现；
12、2020，浏览器对于ESM和HTTP2的更全面化支持，bundleless思路出现，ESBuild，出现在大众视野
13、2021，Vite发布

阶段分为：
1、初版构建工具：grunt（task）、gulp（flow）
2、webpack
3、基于webpack思维，扩展一些新兴构建工具
4、bundleless构建工具
5、正在进行时，基于Rust的前端工具链重构（swc、rspack）

grunt 11年

基于Task的构建工具，对应任务的配置，我们通过Plugins来完成

gulp

通过定义Task与Flow，自定义打包构建流程

构建基石 Webpack

衍生出rollup、parcel

突破性的构建工具
go、rust来去编写构建工具
webpack+babel 比较受人诟病

ESBuild

js编译引擎v8，v8引擎是基于C++编写的
js属于解释性语言，go语言是编译型语言不存在编译时的开销，只有运行时，所以速度快
基于Go语言，速度快，但是功能不够完善 多线程

在webpack、rollup使用中，相关的依赖我们需要第三方库来支持

• babel来去转译和检查
• eslint来去检查
• tsc 实现ts的转译和检查
• less、sass这些都需要预处理器工具来完成

swc

Vite

几大特点

1、冷启动
2、快速热更新
3、bundleless
4、优化构建

特性说明：
1、开发环境冷启动，构建基于ESBuild，线上产物构建 rollup
2、本地HMR，做了很多优化，webpack是不是需要分析依赖图（耗时的），因为开发环境ESM方式请求资源文件
3、配置简单，比parcel还是复杂点

区分环境构建

• 开发环境 esbuild，bundleless方案进行构建
• 开发环境 rollup

如果你想在低版本浏览器调试，不好意思，vite不支持，因为vite是基于ESM的，低版本浏览器不支持ESM

热更新原理

建立长链接，websocket

vite/client 插入到客户端
vite websocket 服务

浏览器的热更新需要结合，定义一些事件来处理：connect、disconnect、message
vite/client 会监听文件变化，然后通知vite服务，vite服务会推送到客户端

turbopack