推荐一波质量很高，值得一看的学习资料，内容涵盖 Webpack 应用、示例、原理、工具，希望对你有用

插件系统是一种软件架构模式，允许开发者通过添加外部模块或组件来扩展和定制软件应用的功能，而无需修改其核心代码。这种方式为软件提供了高度的可扩展性、灵活性和可定制性。 用过构建工具的同学都知道，grun

解析 webpack 核心流程与插件架构，理解： - Webpack 从启动到输出 bundle，内部逻辑流转过程 - 编写 webpack 插件前，你需要弄清楚哪些问题

构建体系作为前端工程化中的重要一环，是每一个中级前端跃升高级前端的必经之路，同时也是面试过程中的重灾区。但却很少有人将其进行系统性的梳理，本系列将以此为宗旨，帮助大家从零到一系统性的建立构建知识体系。

随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

什么是 sourcemap sourcemap 是关联编译后的代码和源码的，通过一个个行列号的映射。 比如编译后代码的第 3 行第 4 列，对应着源码里的第 8 行第 5 列这种，这叫做一个 mapp

性能优化总是被面试官问，每次都只能答出那么几个，其实大家都清楚性能优化手段非常多，只要是能让用户体验更好的手段都可以称之为性能优化，本期我就总结下我所知道的性能优化手段，欢迎各位补充~ 一、减少

图片懒加载原理 图片懒加载也叫延迟加载，只加载当前屏幕的图片，可视区域外的图片不会进行加载，只有当屏幕滚动的时候才加载。 特点： 提高网页加载速度 减少后台服务器压力 提升用户体验 原理 将图片地址存

Webpack 作为前端使用最广泛的打包工具（之一），它支持 CommonJS、AMD 和 ES module 模块化。本文将从源码分析 Webpack5 是如何帮助我们实现代码中支持CommonJS