webpack5知识点总结

霜叶w

已于 2022-03-13 19:46:45 修改

阅读量741

点赞数

分类专栏： js 文章标签： webpack typescript javascript

于 2022-03-08 22:58:17 首次发布

本文链接：https://blog.csdn.net/weixin_44043130/article/details/123362669

版权

js 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

本文深入探讨了webpack作为前端构建工具的重要性，对比了它与gulp、vite的差异。详细介绍了webpack的loader和plugin机制，以及编译流程。重点讨论了tree shaking的代码优化和热更新原理，并阐述了模块联邦在微前端实践中的应用。同时，提供了通用和特定环境下的webpack优化策略，包括减少loader使用、持久化缓存等。

摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、为什么使用webpack
二、webpack与其竞品
- gulp
- vite
三、webpack的loader与plugin
四、webpack打包编译（compile）流程
五、webpack treeshaking如何剔除多余代码并且做minmax 处理
六、webpack热更新原理
七、webpack模块联邦
八、webpack优化
参考文章

一、为什么使用webpack

前端在构建项目的过程中需要对项目进行模块化拆分（包含代码打包拆分和编写时的模块化编写），解决维护、文件过大等难题，变量的作用域问题等

二、webpack与其竞品

gulp

gulp的主要作用是自动化和优化工作流，例如编译less文件为css，编译es6和typescript等这种耗时的任务。
gulp擅长处理静态资源，对静态资源的处理创建任务即可完成自动化管理。gulp确实模块化管理的能力，对单页面应用的模块化支持不够，不能做到有效的模块整合

vite

三、webpack的loader与plugin

webpack中有两个很重要的部分是loader与plugin
loader主要是提供了文件转换的功能，类似于gulp的自动转换，比如less-loader less转css，babel-loader需要搭配@babel/core转换es代码等
plugin是功能强大的插件，例如html-webpack-plugin就可以提供生成html文件的功能。它可以在编译的过程中利用compiler对象获取webpack的完整环境，以及确认执行的时机等

四、webpack打包编译（compile）流程

根据配置的入口
traval() 遍历文件提取依赖
构建出一个依赖图（引用的关系存在上面，相当于有了每一个文件的位置，文件本身也能拿到）
bable等loader进行转换处理
根据入口切片行成chunk（包含所有依赖合并的结果）
产出 bundle
挂载bundle(html)

plugin执行的时机是优于loader的，它是能够获取到整个webpack执行过程的所有内容的
next.js主要是为了react生产贴身打造，他需要做的一开始就是为了生产环境打造的单页面，每个页面都有文件自动生成路由，支持多种开发辅助工具，内置less、typescript等

五、webpack treeshaking如何剔除多余代码并且做minmax 处理

这个功能主要得以与import的静态分析功能,在编译时分析模块的使用情况，如果使用require在运行时确定就来不及确定模块的使用情况，参考js 模块化，AMD、CMD以及commonjs和es6模块化

六、webpack热更新原理

client与webpack通过websocket进行关联
一般使用webpack-dev-server打开开发环境，webpack监听文件内容变化，通过hash值判断进行热更新，如果没有配置当更新时会使用刷新

七、webpack模块联邦

利用webpack5的webpack/lib/container/ModuleFederationPlugin 提供的ModuleFederationPlugin 插件完成一个微前端（微前端现有的落地方案可以分为三类，自组织模式、基座模式以及模块加载模式）部署形式的项目
参考文章如何使用webpack5的模块联邦特性落地微前端