先不进源码，分析一下打包后的文件，来一张图： 　　 　　首先创建两个JS文件，内容如下： 　　分别为配置文件和入口JS文件，内容弄个简单的。 　　接下来在当前目录执行webpack --config config.js，会输出一个output.js，简化后 ...

　　解决掉了最头疼的DirectoryWatcher内部实现，这一节可以结束NodeWatchFileSystem模块。 　　关于watch的应用场景，仔细思考了下，这不就是热重载的核心嘛。 　　 ...

　　写在前面： 　　本来一开始想沿用之前vue源码的标题：webpack源码之***，但是这个工具比较巨大，所以为防止有人觉得我装逼跑来喷我(或者随时鸽)，加上浅析二字，以示怂。 　　既然是浅析，那么案例就不必太复杂，所以继续按照之前vue源码，以最简单形式进行源码分析，如下： 　　配置文件 ...

validateSchema模块 　　首先来看错误检测： 　　可以注意到，这里传了两个参数，其实第一个参数来源于一个JSON文件： 　　这个JSON文件非常大， ...

Tapable工具 　　 　　完成webpack默认参数注入后，下一步虽然是 new Compiler() ，但是这东西不是一下可以讲完的，复杂的一批。 　　不如先从工具入手，分块讲解compiler，首先来看看事件流执行器Tapable工具。 　　tips：这里的Tapable源码来自于 ...

一、前言 现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。 在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端 ...

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

如今Webpack已经是一个不可或缺的前端构建工具，借助这个构建工具，我们可以使用比较新的技术（浏览器不能直接支持）来开发。 你是否好奇你写的代码经过Webpack构建之后会生成什么东西？是否有时调试遇到莫名其妙的问题？ 本文不讲如何进行配置，只是基于几个基础的例子，简要分析一下 ...