loader解析文件是Webpack中重要的一环，之所以能一切皆模块就是因为有许多强大的loader提供的支持。了解它的工作原理可以让我们从容地为项目选择合适的配置，还可以更有目的性的针对性能瓶颈分析优化，更好地做一个合格地Webpack配置工程师。 issure: 匹配引用这…

loader-runner在Webpack的构建模块周期使用，负责将文件路径转换为文件内容。我们添加的loader最终会在这里执行，另外资源文件也是在这里被加载。文章使用2.4.0版本代码调试。 loader可以支持以同步或异步(callback, Promise)方式运行，调…

在使用过Webpack后，它强大的的灵活性给我留下了深刻印象，通过Plugin和Loader几乎可以随意扩展功能，所以决定探究Webpack的实现原理，学习作者的编程思想。 但是在学习源码过程中还是遇到了挺大困难，一是它的插件系统设计的错综复杂，刚开始看容易被绕晕，另外是它功能…

本文面向那些需要或者想了解开发 webpack plugin 和想要深究 webpack 源码但是无处下手的人群。这篇文章会带你大致了解 webpack 原理与执行流程，具体的源码限于篇幅暂不讨论，后面会考虑出一系列 webpack 源码解析系列与 webpack 经典插件解析…

学习webpack源码时，总是绕不开tapable，越看越觉得它晦涩难懂，但只要理解了它的功能，学习就会容易很多。 如上例子所示，每一种hook都会有两个方法，用于添加任务和触发任务执行。在同步的hook中，分别对应tap和call方法。 1. 并行 2. 串行可熔断 3. 串…

做自己的轮子，让别人用去吧。 本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。 在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。因为我们需要修改 index.js 中的内容，不想用户被缓存。 打包时动态创建 s…

翻看日历，发现今天是 2020 庚子年第一个节气——立春。上古以“斗柄指向”法，用北斗星斗柄指向寅位时为立春。干支纪元，以立春为岁首，意味着新的一个轮回已开启，万物起始、一切更生。尽管我们今天仍然面临险峻疫情的挑战，但今日就代表了温暖、生长，我也愿意在在此刻梳理计划本年度的技术…

webpack源码写的还是比较绕，各种回调，递归和异步跳来跳去，刚开始跟代码时容易迷失方向。console.log在处理复杂流程就稍显薄弱，调试简单的代码还行，但是遇到各种异步方法和递归调用时，只通过log打印出来的东西很难看得懂。看代码时有时候需要我们深入到各个子流程中，有时…

很久很久以前我们在写页面时，通常将css单独写成文件引入，有时也直接在html里写css非常方便，这时页面也不多动效也不需要，写几个页面一把梭就能应付。 渐渐地网页成了大众获取信息的主要方式，这时的网站信息也越来越丰富，对网页的质量要求越来越高，这一时期一些前端自动化构建工具慢…