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

代码中定义分割点； 使用 CommonsChunkPlugin 分割代码； 使用 DllPlugin 和 DllReferencePlugin 分割代码。

webpack 作为当前最为流行的模块打包工具，几乎所有的主流前端开发框架（React、Vue 等）都会将其作为默认的模块加载和打包工具。通过简单的配置项，使用各种相关的 loader 和 plugin，我们就可以实现自动的模块依赖分析并打包，从而大大降低了前端项目的开发复杂度，明显提高了前端项目的开发效率。

所有的内容之后会陆续放出，如果你有任何想要了解的内容或者有任何疑问，关注公众号【前端瓶子君】回复【123】添加好友，我会解答你的疑问。 作为一个前端开发人员，我们花费大量的时间去处理 webpack、gulp 等打包工具，将高级 JavaScript 项目打包成更复杂、更难以解…

0. 背景 随着构建体系不断完善、构建体验不断优化，webpack 已经逐渐成为了前端构建体系的一大霸主，对于工作中的真正意义上的前端工程项目，webpack 已经成为了我们前端构建技术选型的不二选择，包括 create-react-app 以及 vue-cli 等等业内常见的…

继上两篇文章webpack工作原理介绍（上篇、下篇）,我们了解到Loader：模块转换器，也就是将模块的内容按照需求装换成新内容，而且每个Loader的职责都是单一，只会完成一种转换，所以我们一般对源文件的处理，也是由多个Loader以链式顺序执行的方式来进行多次装换，然后得到…

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

前几天 webpack 作者 Tobias Koppers 发布了一篇新的文章 webpack 4.0 to 4.16: Did you know?(需翻墙)，总结了一下webpack 4发布以来，做了哪些调整和优化。 并且说自己正在着手开发 webpack 5。 正好我也在使…

首先我们先回顾一下webpack常见配置，因为后面会用到，所以简单介绍一下。 这里面我们重点关注 module和plugins属性，因为今天的重点是编写loader和plugin，需要配置这两个属性。 通过逐层识别模块依赖。（Commonjs、amd或者es6的import，w…