Tree-Shaking这个名词，很多前端coder已经耳熟能详了，它代表的大意就是删除没用到的代码。这样的功能对于构建大型应用时是非常好的，因为日常开发经常需要引用各种库。但大多时候仅仅使用了这些库的某些部分，并非需要全部，此时Tree-Shaking如果能帮助我们删除掉没有…

Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。 而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类Tapable。 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 Compiler、Com…

Babel 是一个 JavaScript 编译器,它能将es2015,react等低端浏览器无法识别的语言，进行编译。 上图的左边代码中有箭头函数，Babel将进行了源码转换，下面我们来看Babel的运行原理。 解析（parse），转换（transform），生成（genera…

当下最流行的模块打包器 webpack 于2018年2月25日正式发布v4.0.0版本，代号legato。从官方的 发布日志 来看, 本次大版本更新带来了很多新特性更新和改善，这将会让webpack的配置更加简单。本文，笔者将会全面介绍webpack4的新特性及实践。 在发布日…

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

postcss官方的GitHub上还有中文的介绍。 简单来说postcss就是一个css的转换器，有了postcss或许你就不用再用less和sass了，通过在postcss上添加插件可以组装出你需要的语法需求和功能（属性变量，父子嵌套，版本兼容等），在postcss上通常会用…

如今对于每一个前端工程师来说，webpack 已经成为了一项基础技能，它基本上包办了本地开发、编译压缩、性能优化的所有工作，从这个角度上来说，webpack 确实是伟大的，它的诞生意味着一整套工程化体系开始普及，并且慢慢统一了前端自动构建的让前端开发彻底告别了之前的刀耕火种时代…

webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。 现在vue、react等脚手架都会自动将开发环境使用的webpac…