平日开发过程中，大家是如何调试线上问题的呢？等一下，还有没有人在用 SourceMap 调试啊？通过 SourceMap，我们可以在浏览器内，直接看到源码，而不是编译、压缩、混淆后的部署产物。

1. 基础 -- 会配置 2. 进阶 -- 能优化 3. 深入 -- 懂原理 一层层晋级打怪 🦖 ，解答不同深度的 Webpack 面试题问题 🤓

所有人都知道 Webpack 很复杂，但 Webpack 的源码却很优雅，是一个典型的可插拔架构，不仅逻辑清晰，而且灵活好扩展。近几年出来的一些构建工具，大多也都参考了 Webpack 的这种架构方式

「万字解析」架构视角图文并茂讲述Webpack Loader原理，从基础配置过渡源码实现，最终手把手带你复刻企业级loader。从原理搞懂Webapck中loader是如何处理你的文件。

自从 2018 年 2 月，webpack4 发布以来，webpack 就暂时没有更进一步的重大更新，为了保持 API 的一致性，旧的架构没有做太多改变，遗留了很多的包袱。阔别 2 年多后，2020 年 10 月 10 日，webpack 5 正式发布，并带来了诸多重大的变更，…

在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。 本文将从缩小文件搜索范围、减少打…

Webpack 迭代到4.x版本后，其源码已经十分庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。但是为了了解其内部的工作原理，让我们尝试从一个最简单的 webpack 配置入手，从工具设计者的角度开发一款低配版的 Webpack。 假设某一天，我们接到了需求，需要开发…

按需加载，本质上是把一个组件库的不同组件拆分成不同文件，按照需要引用对应的文件，而该文件暴露一个install方法，供Vue.use使用。 上面的写法比较繁琐，而且需要知道每个组件的实际路径，使用起来并不方便，所以我们还需要借助一个转换插件。 到这我们可以知道，要搭建一个按需加…

随着前端代码需要处理的业务越来越繁重，我们不得不面临的一个问题是前端的代码体积也变得越来越庞大。这造成无论是在调式还是在上线时都需要花长时间等待编译完成，并且用户也不得不花额外的时间和带宽下载更大体积的脚本文件。 然而仔细想想这完全是可以避免的：在开发时难道一行代码的修改也要重…