现在我们开发一个 React 项目最快的方式便是使用 Facebook 官方开源的脚手架 create-react-app ，但是随着业务场景的复杂度提升，难免会需要我们再去添加或修改一些配置，这个时候如果对 webpack 不够熟练的话，会比较艰难，那种无力的感觉，就好像是女…

之前写了一篇妈妈再也不用担心我不会webpack了，这次继续对其进行补充。本文依旧是遵循直观易懂的规则进行书写。希望对大家有帮助。如果不太熟悉webpack可以先看看之前的文章妈妈再也不用担心我不会webpack了。下面我们由浅入深来介绍webpack的使用 path其实是no…

简单来说就是：将 *.vue 文件变成 *.bundle.js，然后放入浏览器运行。 以上的输出就是最终可以拿到浏览器上运行的 javaScript，尽管笔者已经删除了一些会影响理解的部分代码，但是这么直接观察这个文件，难免还是无从下手。 那么我们继续细化分析步骤，vue-lo…

所谓Tree-shaking就是‘摇’的意思，作用是把项目中没必要的模块全部抖掉，用于在不同的模块之间消除无用的代码，可列为性能优化的范畴。 Tree-shaking早期由rollup实现，后来webpack2也实现了Tree-shaking的功能，但是至今还不是很完备。至于为…

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

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

基于 webpack 的持久化缓存方案

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

如何基于webpack做持久化缓存目前感觉是一直没有一个非常好的方案来实践。网上的文章非常多，但是真的有用的非常少，并没有一些真正深入研究和总结的文章。现在依托于于早教宝线上项目和自己的实践，有了一个完整的方案。 想要做持久化缓存那么就要依赖 webpack 自身提供的两个 h…