随着前端工程化的不断发展，构建工具也在不断完善。作为大前端时代的新宠，webpack渐渐成为新时代前端工程师不可或缺的构建工具，随着webpack4的不断迭代，我们享受着构建效率不断提升带来的快感，配置不断减少的舒适，也一直为重写的构建事件钩子机制煞费苦心，为插件各种不兼容心灰…

在前端技术发展日新月异的今天，前端工程化已经成了每个前端工作/学习者的必备知识，一文带你吃透webpack

webpack构建主流程塑造，从webpack(options) -> compiler -> compilation.

前端发展到了今天，web应用越来越复杂和庞大，前端技术迅猛发展，各路大神各显神通，多种优秀的前端框架、新语言和其他相关技术(如下图所示)不断涌现，这些都极大地提高了我们的开发效率。面对这些框架所衍生出

在分析 Vue 文件编译过程时，囿于对其相关 loader 的流向不清晰，即使知道哪些 loader 发挥了什么作用，也总觉得是在雾里看花，不甚明了，于是准备走读源码分析下 loader 机制。 JS 不是一门易读的语言，为了节约时间，我先创建了一个简单的工程，借此我可以调试 …

webpack 对于每个前端儿来说都不陌生，它将每个静态文件当成一个模块，经过一系列的处理为我们整合出最后的需要的 js、css、图片、字体等文件。来自官网的图很形象的阐述了 webpack 的功能 —— bundle js / css / ... （打包全世界ヾ(◍°∇°◍)…

1. 给出一个实例，对比该案例webpack构建前后的差异，为后面分析构建主流程组铺垫 2. 分析运行时的执行逻辑。

webpack4可以零配置打包，webpack4会默认对src目录下的index.js文件打包。 现在运行npx webapck，可以在demo1目录下看到dist目录，dist目录下有一个main.js文件，这就是打包后的文件，打开查找可以看到 console.log(dem…

想要学好 webpack，我们首先要了解 webpack 的机制，我们先从js加载css开始学习。 bundle 是一个立即执行函数，可以认为它是把所有模块捆绑在一起的一个巨型模块。 学习一个工具我们不仅要看懂它的配置，还要对它的原理一起了解，只有学到框架的精髓，我们才能应对如…