本文深入解析了webpack的更新流程，包括初始化参数、编译、确定入口、模块编译、输出资源等步骤，并介绍了热更新（HMR）在开发中的重要作用，旨在提高开发效率。同时，讲解了webpack中loader与plugins的区别，loader负责转换内容，而plugins扩展功能。最后，提供了配置热更新和理解loader与plugins的实践指导。
一、webpack的更新流程
1、初始化参数：根据配置文件和shell语句读取、合并，得到最终参数
2、开始编译：根据上一步得到的参数初始化，调用函数的run方法开始编译
3、确定入口文件：根据entry确定所有的入口文件
4、模块编译：根据入口文件，调用所有的loader进行模块的编译，再找出与该模块依赖的模块，根据递归将所有入口文件都进行处理；
5、完成模块编译：经过上一步通过loader对模块编译，得到被编译的最终内容和模块之间的依赖关系
6、输出资源：根据模块之间的依赖关系，组装成一个个包含多个模块的chunk，再把每个chunk转换成单独的文件加入到输出列表
7、完成输出：根据配置确定输出的路径和文件名，把内容写到文件系统
二、热更新（HMR hot module replacement）
目的：为了提高开发的速度和提高编程的效率，使用在开发环境
热更新是在不需要刷新浏览器的情况下，运行时可以替换、增加、删除模块（比如说开发时在代码里修改了一个样式，点击保存后页面会自动更新，不需要在刷新浏览器）
接下来看看怎么配置提升我们的工作效率吧！！！
1、引入webpack
2、在plugins中使用new webpack HotModuleReplacementPlugins
new webpack.HotModuleReplacementPlugin()3、在devServer中设置hot为true
三、webpack经常说的loader和plugins的区别
loader本质是一个函数，对函数中接收到的内容做转换，由于webpack认识javascript，所以loader相当于一个翻译官，对其他文件进行转换
plugins是一个插件，来扩展webpack的功能，需要在plugins里面进行配置，每一项都是一个plugin实例，参数都通过构造函数传入
扫一扫
449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
