相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require 有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进行编译，所

参考链接：https://www.cnblogs.com/skychx/p/webpack-module-chunk-bundle.html 全集链接 ➡️ webpack 易混淆知识点   webp

Source map 想必大家都不陌生。线上的代码多是压缩后的，如果线上有报错却只能调试那个代码多半是个噩梦。因此我们需要有一个桥梁帮助我们搭建起源代码及压缩后代码的联系。

webpack 用于编译 javascript 模块， 可以把文件格式编译成我们想要的静态文件格式， 但是处理的过程并不是全部由 webpack 本身完成， webpack 只是提供了一个打包机制， 对于各类文件的打包处理需要使用相对应的 预处理模块 loader 来处理， 作…

性能优化是一个项目发展到一定时期之后绕不开的话题，也是每个工程师心中永远在撩拨的刺。 总结一下常用的前端性能优化的方法，希望对大家有些帮助~

从 Webpack2.x 通过插件逐步实现 tree-shaking，到最近炙手可热的 Vite 构建工具也借助了 rollup 的打包能力，众所周知 Vue 和 React 也是使用 rollup

平时出于习惯，看到网站就喜欢去打开调试别人的，学习下别人是怎么去写代码的。但是现代的打包工具往往都把代码压缩和优化过了。所以如何调试以 webpack 为代表的这类网站，去看看别人家代码是怎么个逻辑写出来的？以及探索整个网站的逻辑流程，就是我们今天文章讨论的话题。 这篇文章会比…

在前端工程化日趋复杂的今天，模块打包工具在我们的开发中起到了越来越重要的作用，其中webpack就是最热门的打包工具之一。 说到webpack，可能很多小伙伴会觉得既熟悉又陌生，熟悉是因为几乎在每一个项目中我们都会用上它，又因为webpack复杂的配置和五花八门的功能感到陌生。…

一直对webpack热更新非常好奇，在看了一些资料之后。尝试写一个简单的demo模仿。 第一步要实现一个跟webpack类似的模块处理工具。这里直接用极客时间上的一个课程的demo. 简单介绍一下这几个文件： lib：类似webpack。里面的parser.js主要使用bab…