webpack的熟练使用已成为当代前端工程师必备的生存技能。毋庸置疑，webpack已成为前端构建工具的佼佼者，网络上关于如何使用webpack的技术文档层出不穷。但鲜有能将webpack的构建流程讲清楚的。本文尝试从解读源码以及断点调试的方式，来探究 webpack 是如何一…

前言中的“...都是 Tapable 的实例”改为“...都是 Tapable 的子类”。 修正并行写成串行的错误。 Webpack 本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是 Tapable，Webpack 中最核心的负责编译的 Co…

SplitChunks插件是什么呢，简单的来说就是Webpack中一个提取或分离代码的插件，主要作用是提取公共代码，防止代码被重复打包，拆分过大的js文件，合并零散的js文件。 提到前端优化，提取公共代码是必不可少的手段。在Webpack出现前，提取公共代码是人为去处理，而Sp…

这个关键词表示每个模块用eval执行，并且存在@sourceUrl，就是说这种配置的devtool在打包的时候，生成的bundle.js文件模块都会被eval包裹，并且后面跟着sourceUrl,指向的是原文件index.js，调试的时候就是根据这个sourceUrl找到的in…

Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。 可以看出以上的处理过程需要有顺序的链式执行，先 sass-loader 再 css-loader 再 style-loader。 由上面的例子可以看出：一个 Load…

1、文件初始化1、安装依赖2、生成package.json文件3、package.json脚本配置5、根目录新建src目录，用于存放源文件，新建/src/index.js，内容任意6、试运行打包2、c

对 Babel 的配置项的作用不那么了解，是否会影响日常开发呢？老实说，大多情况下没有特别大的影响（毕竟有搜索引擎）。 不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断编译验证，输出了本篇文章，为了更好的阅读体验，修修改改，最终算是以我个人比较喜欢…