Webpack 基于 tapable 构建了其复杂庞大的流程管理系统，基于 tapable 的架构不仅解耦了流程节点和流程的具体实现，还保证了 Webpack 强大的扩展能力；学习掌握tapable，有助于我们深入理解 Webpack。 个人觉得 tapable 是一个基于事件…

webpack 是我们现阶段要掌握的重要的打包工具之一，我们知道 webpack 会递归的构建依赖关系图，其中包含应用程序的每个模块，然后将这些模块打包成一个或者多个 bundle。 莫慌，我们一点点拆分开看，其实总体的文件就是一个 IIFE——立即执行函数。 函数的入参 mo…

Webpack5 在 2020 年 10 月 10 日正式发布，并且在过去的几个月中快速演进和迭代，截止 1 月 28 日，Webpack5 已经更新了 18 个 minor 版本，带来了许多十分吸引人的新特性。据官网介绍，Webpack5 整体的方向性变化有以下几点： 最后的…

1. loader include表示哪些目录中的文件需要进行babel-loader，exclude表示哪些目录中的文件不要进行babel-loader。 这是因为在引入第三方模块的时候，很多模块已经是打包后的，不需要再被处理，比如vue、jQuery等；如果不设置inclu…

前一段时间我把webpack源码大概读了一遍，webpack 到4.x版本后，其源码已经比较庞大，对各种开发场景进行了高度抽象，阅读成本也愈发昂贵。 过度分析源码对于大家并没有太大的帮助。本文主要是想通过分析webpack的构建流程以及实现一个简单的webpack来让大家对we…

随着多终端设备的迅速普及，Web前端开发的复杂性和应用场景日益扩大，Webpack在前端构建演变的工程化浪潮中担当起了针对不同应用场景打包的大任。 如今，Webpack可谓是JavaScript社区最伟大的项目之一。 本文力争从源码层面窥探Webpack的实现原理。文中出示了核…

性能，是一个问题。 取决于我们对性能的理解深浅，以及是否有一套好的工具和方法。 介绍三步法之前，先来简单了解下Chrome开发者工具的Performance性能面板，以及性能分析报告的基本组成。 然后按F12打开Chrome的开发者工具，选择Performance性能面板。 指…

说明：在拉钩前前后后，反反复复地学习了几遍webpack, 终于把webpack相关脉络理清楚了。 webpack 本身默认只能处理js,只要一个默认的js-loader,如果需要处理其他类型的文件，需要配置其他的loader,比如css-loader,ts-loader. 配…

我们在Webpack基础篇介绍了多种loader和plugin以及每种的用途；那么他们两者在webpack内部是如何进行工作的呢？让我们手写一个loader和plugin来看看它内部的原理，以便加深对webpack的理解。 因此我们就来尝试写一个less-loader和styl…