本文主要介绍webpack诞生的原因以及webpack解决了哪些问题。webpack中的loader和plugins是什么？它是如何工作的？能否自己搭建loader或者pluginwebpack如何打包文件？什么是AST抽象语法树？webpack是如何管理打包模块之间的交互的？webpack的运行时和清单是什么？在实际开发中，我们修改某个文件后，页面也会随之发生变化。这个热更新过程是如何工作的？webpack的缺点是什么？webpack诞生的原因早期是如何开发复杂功能的回想一下我们刚开始学习JS的时候，浏览器需要通过script标签加载JS文件才能运行，而复杂的功能需要分离到不同的JS文件中，所以需要加载很多JS文件，会造成网络瓶颈。PS：Chrome在一个任务周期内最多可以并发发送6个网络请求。如果所有的功能都写在一个JS文件中，必然会增加维护成本和开发成本。webpack诞生后，解决了什么？Webpack是在Node.js发布之后诞生的，提出了CommonJS来解决功能模块化的问题，但是浏览器并不直接支持CommonJS语法，所以使用require和Browserify来翻译。webpack将提供一个node环境，支持CommonJS和ESM规范，支持任何模块格式。让开发者只关注业务开发，不用关心模块在浏览器中的兼容性。PS：只要提供不同模块对应的loader，webpack就可以将其转换成浏览器可以直接运行的JS文件，Vite构建工具的核心概念也是ESM。它的核心思想是你不需要加载整个项目的JS文件。当页面内容需要哪个模块的JS文件时，会发起JS文件加载请求，并缓存起来。这种方法可以大大提高项目的加载速度。webpack中的loader和plugins是什么？上面说了，webpack可以打包不同文件格式的代码，经过webpack处理后可以直接在浏览器中运行，但是不能增强功能。这就是loader的作用，比如sass-loader就是用来解析sass文件的。Loader可以理解为一个学校，无论你是哪里的学生，出门后都会发给同样的校服。这个校服就是浏览器运行的JS。Plugin就是我们常说的插件，用来增强功能，弥补loader的不足，比如axios。就像游戏中的装备一样，游戏角色装备不同的装备，伤害也会不同，技能也会更加炫酷。加载器会在生成AST抽象语法树的过程中进行加载，以解析不同格式的内容；plugin的加载时间是不确定的，因为在webpack构建过程中，会在特定的时间广播，制定一定的plugin。具体时间是webpack自动识别的，所以插件的加载时间不一定。webpack是如何打包文件的？什么是AST抽象语法树？在配置文件webpack.config.js中，entry是webpack打包的入口，但是一些高版本的脚手架会隐藏这个文件。如果要配置它，请先创建此文件。可以配置多个webpack入口文件，详见官网：webpack打包入口起点module.exports={entry:'./path/to/my/entry/file.js'};webpack打包过程是怎样的？什么是AST抽象语法树？loader跟它有什么关系？获取特定关键字：webpack会从入口读取入口文件后读取文件内容（PS：这里是只读过程），在读取过程中会进行词法分析，比如一些关键字let,var,important...词法分析：获取到具体的词法结构后，如何确定对应所表达的含义，这里会使用加载器对获取到的词法分析赋予含义。比如assignment的赋值和对文件的引用，根据文件路径读取文件。生成AST抽象语法树：.词法分析完成后，生成AST抽象语法树。也就是说，从入口文件中读取，通过loader处理，最终得到一个反映文件间依赖关系的树状结构。生成chuck：AST抽象语法树完成后，webpack会根据依赖关系生成多个chunk，并为每个chunk生成一个文件。生成的文件是经过webpack打包后可以直接在浏览器运行的文件。按照output设置的export输出文件。PS：【你应该知道的】抽象语法树ASTwebpack是如何管理打包模块之间的交互的？上面说到，chunk是在webpack打包过程中产生的，那么这些chunk之间的依赖和交互是如何实现的呢？runtime：其作用是管理和确定chunk或打包文件之间的依赖关系；相当于map函数，知道chunk和chunk的关系。manifest：当webpack打包后的文件发送到浏览器时，runtime会通过manifest解析加载模块。使用清单中的数据，运行时将能够检索这些标识符并找出每个标识符后面的模块。比如runtime的功能是map检索，manifest的功能是地名，用于检索对应的chunk或文件。PS：官方对webpack热更新原理的解释是什么？如果您不知道什么是热更新，请到官网阅读相关说明。####如何检查代码变化？应用程序要求HMR运行时检查更新。HMR运行时异步下载更新，然后通知应用程序。该应用程序需要HMR运行时来应用更新。HMR运行时同步应用更新。例如：应用需要webpack检查任意一个地名的内容是否发生了变化。如果webpack发现任何变化，它会记录变化并同时通知应用程序。“喂，app！这里出事了，跟以前不一样了，这是一个异步过程，如果没有，就没有后续动作了。app收到消息后说：”我明白了，你把情况那里有Update，然后给我》webpack收到后，开始同步更新，把新的结果发送给应用。PS：webpack模块热替换webpack有什么缺点？看完这篇，相信你有个大概的了解了webpack打包原理的idea但是，在实际开发过程中，为什么我们启动一个用webapck构建的大型项目这么慢？更新某快的代码热更新速度也很慢？这是因为webpack首先将项目文件打包，然后发送到浏览器，打包过程比较耗时，当代码修改的时候，更新的不只是这个地方，而是更新文件，如果有引用的话该文件，它也将被重新打包和更新编辑。这是运行慢，更新慢，比如我修改了A，但是B、C、D、F都引用了A，那么它们都会重新打包更新。PS：Vite构建工具的核心思想是ESM，构建速度和更新简直更快。P.webpack开发或许可以刷朋友圈，Vite是专业的！后面会介绍Vite，敬请期待。
