22 为你准备了一份 Webpack 工程化最佳实践总结

世界上最快乐的事,莫过于为理想而奋斗。                —— 苏格拉底 介绍了这么多 Webpack 的配置和优化项目,可能大家有点迷糊了,本小节将用小幅内容来总结下 Webpack 的最佳实践,让大家在实际项目中可以直接拿本篇文

23 怎么调试 Webpack?

宝剑锋从磨砺出,梅花香自苦寒来。                —— 佚名 在深入理解 Webpack 内核原理之前,我们先来学习下研究方法,即怎么调试 Webpack。我们都知道 Webpack 实际是 Node.js 编写的,执行的时候我们

24 Tapable —— Webpack 的核心模块

立志是事业的大门,工作是登门入室的的旅途。                ——巴斯德 Webpack 工程相当庞大,但 Webpack 本质上是一种事件流机制。通过事件流将各种插件串联起来,最终完成 Webpack 的全流程,而实现事件流机制的

25 Webpack 的 Compiler 和 Compilation

与有肝胆人共事,从无字句处读书。                —— 周恩来 在 Webpack 工作流程 文章中已经提到过,Compiler 和 Compilation 都是继承自Tapable ,不同点是Compiler是每个 Webpac

26 Webpack 工作流程

机会不会上门来找人,只有人去找机会。                ——狄更斯 Webpack 主要工作是从一个入口开始,将小块独立的代码编制成更大而复杂的可以运行在浏览器中的代码,独立的代码就是一些 JavaScript 及其它可以被 Jav

27 从 Webpack 的产出代码来看 Webpack 是怎么执行的

老骥伏枥,志在千里; 烈士暮年,壮心不已。                ——曹操 通过之前的章节内容,我们已经了解了 Webpack 的整个打包流程,并且针对源码做了分析。这篇文章,来分析下 Webpack 打包产出物是怎样执行的。本文基于

28 Webpack 的模块热替换做了什么?

不安于小成,然后足以成大器;不诱于小利,然后可以立远功。                ——方孝孺 Webpack 的模块热替换(HMR - Hot Module Replacement,又称为热替换、热更新等)是 Webpack 最令人兴奋的

29 实战:使用 PostCSS 打造移动适配方案

生活永远不像我们想像的那样好,但也不会像我们想像的那样糟。                ——莫泊桑 在 Web 移动开发中,手机屏幕适配是个很大的话题,最开始做屏幕适配可以追溯到桌面页面(PC)阶段。随着电脑屏幕越来越大和 iPad 的出现,

30 实战:手写一个 markdown-loader

古之立大事者,不唯有超世之才,亦必有坚韧不拔之志。                ——苏轼 根据上面的工作流程描述,我们知道在 Webpack 中,真正起编译作用的便是我们的 loader,loader实际就是处理单个模块的解析器(加载器不如解

31 实战:手写一个 prefetch-webpack-plugin 插件

人生太短,要干的事太多,我要争分夺秒。                ——爱迪生 Webpack 的plugin是 Webpack 的核心概念,可以说整个 Webpack 都是由插件组成的。本章节讨论的内容是我们在配置文件配置的 plugin。