webpack的成功之处，不仅在于强大的打包构建能力，也在于它灵活的插件机制。 也许你了解过webpack的插件与钩子机制；但你或许不知道，webpack内部拥有超过180个钩子，这些钩子与模块（内置插件）之间的「创建」「注册」「调用」关系非常复杂。因此，掌握webpack内部…

本文通过精美的图文，深入分析 Webpack Loader 的运行机制，带你吃透 Webpack loader 的 11 个核心问题。

这是前端领域的转译打包工具链的第二篇文章，上篇文章讲了前端领域的各种转译器，包括 babel、tsc、terser、eslint、postcss、posthtml、swc 等，介绍了他们各自的用途和通

基于 babel 打造完整工具链，彻底通关 babel！或许你都没想过 babel 原来这么的强大。

做了一夜动画，让大家十分钟搞懂Webpack 一、什么是webpack webpack是一个打包工具，他的宗旨是一切静态资源皆可打包。 二、原理分析 首先我们通过一个制作一个打包文件的原型。 假设有两

例如 babel-loader 可以将 ES6 代码转换为 ES5 代码；sass-loader 将 sass 代码转换为 css 代码。 rules 数组包含了一个个匹配规则和具体的 loader 文件。 上述代码中的 test: /\.js$/ 就是匹配规则，表示对 js …

通过第一节的学习我们知道完成第一步骤解析完AST后，接下来是进入转换，插件在这个阶段就起到关键作用了。 答：presets是预设，举个例子：有一天树酱要去肯德基买鸡翅、薯条、可乐、汉堡。然后我发现有个套餐A包含了(薯条、可乐、汉堡)，那这个present就相当于套餐A，它包含了…

我们公司有一个自己维护的应用组件库，但是应用组件库的文档不足，同时还不能在线运行栗子，看了看ElementUI的文档还不错，参考(抄袭)ElementUI的实现方案来编写公司内部的组件说明文档。 把用markdown写的文档拼接成vue文件(这个通过他们自己写的md-loade…

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