随着前端复杂度的不断提升，诞生出很多打包工具，比如最先的grunt，gulp。到后来的webpack和Parcel。但是目前很多脚手架工具，比如vue-cli已经帮我们集成了一些构建工具的使用。有的时候我们可能并不知道其内部的实现原理。其实了解这些工具的工作方式可以帮助我们更好…

经常逛 webpack 官网的同学应该会很眼熟上面的图。正如它宣传的一样，webpack 能把左侧各种类型的文件（webpack 把它们叫作「模块」）统一打包为右边被通用浏览器支持的文件。webpack 就像是魔术师的帽子，放进去一条丝巾，变出来一只白鸽。那这个「魔术」的过程是…

Webpack热更新（ Hot Module Replacement，简称 HMR，后续均以 HMR 替代），无需完全刷新整个页面的同时，更新所有类型的模块，是 Webpack 提供的最有用的功能之一。 HMR 作为一个 Webpack 内置的功能，可以通过 --hot 或者 …

在上一篇文章【Webpack进阶】Loader深入解析中，探索了Loader的原理和运行机制，本文会通过介绍常见样式loader的作用和实现，加深对loader的理解。 下面我们来逐一探讨。 Less是CSS预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，Le…