Mr.Yellow.Wills

往蹇来誉 田获三狐 学习历程2022-4-304月30日前主要是找视频和资源。之前算刚开始一天。 先找视频，主要目的是熟悉umi，尤其是umi的用法这次的策略是，先了解umi，了解如何使用 umi，然后再看源码； 具体实施是先看视频，但不留恋太多时间在视频上，然后快速切入 umi官网；然后看源码； 行动方针：抓住重点，放下细节，列举备忘。 umi 学的是架构，不要学细节；就算想学细节，也可以... more

黑知识为什么说webpack只能处理jswebpack的Parser内核是acorn，是用于解析js的。所以webpack只能编译处理js。node能够处理的有两种，一个是字符串，一个是buffer流，比如文件就是一个buffer流，在webpack中，处理图片文件时，会通过loader，将此图片编译为一个base64 url(也是一个字符串) 或将这个图片拷贝至dist目录，然后生成一个该... more

核心概念bootstrap runtime每个 bundle 中都有一个 webpack 引导(bootstrap) 参考。bootstrap 就是 runtime；二者都是一个意思。即： 参考123function __webpack_require__(moduleId){ //... } bootstrap 更准确的是引导的意思，参考官网bootstrap li... more

chunk调试调试技巧先打印 chunk 对象，如下， 或者按照之前的 《webpack再出发(誉)：module调试 - 调试与前言 - 说明》 的方式打印。123456789101112131415seal(callback) { buildChunkGraph( this, /** @type {Entrypoint[]} */ (this.c... more

webpack阅读经验阅读历程回顾对于webpack源码阅读，刚开始我从 手写一个webpack源码 的视频开始，收益还是挺大的；后期看了一个webpack 5 调试视频 说明，收益也不错；最后以打游击战的方式，解决 Babel options 加载的问题、 module rule exclude 问题，了解了webpack ，并以实战的方式初次阅读源码解决问题，效率低了点，但收获不错。接着... more

基础知识compiler 钩子12345678910// node_modules\webpack\lib\Compiler.js Object.keys(this.hooks).forEach((hookName)=>{ const hook = this.hooks[hookName]; if(hook.tap){ hook.tap('show',... more

往蹇来誉 田获三狐 懂webpack配置不难，但webpack升级后，旧的经验很容易出问题，且webpack像一个黑箱，难以解决。webpack配置学习三个月，升级之后又三个月，没完没了，没有尽头。为此决定一改以往学习webpack配置的策略，改为直接学习webpack调试经验以及了解其源码和原理，以便出现问题或需求，可以直抵关键，一击必中。 webpack源码学习策略为什么要学源码以前我鄙... more

基础知识汇集compiler 会拿到最后一个loader 的产出结果， 这个结果应该是string 或者 buffer。 loader 分类 对于loader 默认都是一样的，只不过使用的时候可以放在不同的位置或进行了不同的修饰，因此说清起来 loader 就有分类了 普通loader 没有任何配置 前置loader enforce 为 pre 后置loader enforce 为post... more

由一个问题想到的在表单开发中，状态设计非常重要，状态设计的好，后期可扩展性 可维护性非常之妙。状态设计是否得当，对后期维护的成本将产生极大影响。经常看到一些页面，因为状态设计失败，导致后期出现 多源控制一个组件，或者一个状态使用多个雷同意义的变量。 多源控制一个组件一个组件既通过内部state控制，又通过外部props控制，如果这二者设计非常好，(比如使用defaultProps+state... more

本篇是对一个中台项目架构中要考虑的主要点做一个介绍，一些细节在这里不多做介绍，直接看项目即可。 如何快速阅读框架源码，或大组件喜欢哪一个功能，就可以先看哪个功能；凭兴趣来；刚开始先打乱仗，把各个点击破；最重要是车轮战，不要急，一定要有结果，不拿到结果，不罢战，不要怕多花了时间；拿出一点林帅的气魄 “我不要伤亡数字，我只要塔山”。有了大体感觉了；然后再系统看一遍； 登录登录方案设计跳转到统一的... more