webpack多页面项目开发按需编译

使用 webpack 进行打包已经成为了不少项目的首要选择，在处理单页面的时候，一切都很ok，我们团队的成员只对一个页面负责，那么每次编译这个页面也就是必然的事情了。但是，如果团队正在开发的是多页面项目，那么如果只修改一个页面的话，就编译所有的页面，这就显得不是很合理了。

我们在优化项目的时候，有一种手段是按需加载。他讲的是什么呢？就是说比如一个长列表，只加载可视区的数据，这样能够更快的处理数据。那这种思路，我们也是可以借鉴的，只加载需要的页面。恰好 webpack 提供了一个 before 钩子，通过这个钩子，我们可以知道 webpack 目前正在处理哪个页面，从而实现按需加载。

大概的流程是：先通过 webpack 的 entry 入口拿到所有的真实页面入口，然后再将这些入口地址缓存起来，然后根据项目的页面创建一个暂时的入口地址，并将文件置空。这样子，webpack 的 entry 里面的页面地址实际上是一个个的空文件，什么也加载不到，如下：

这个时候，我们在webpack 的 before 钩子中去监听所要加载的页面，并将真实的地址写入到之前我们创建的那个空文件夹去，如下图所示：

写入之后，空文件里面的内容变成了如下：

到此按需编译就完成了。

结果对比：

按需前：

按需后：

其他干货文章