bigname22的博客

webpack内部是以什么样的数据结构来体现模块之间的依赖关系？ModuleGraph是如何收集构建的？

大家好，我是Webpack，AKA打包老炮，我的slogan是："打天下的包，让Rollup无包可打"

上集回顾：话音刚落 ~ npm老大哥又来电话了【有大工程】。“喂，老大哥，对方啥阵形啊？”“4-4-2? 踢你的？”“行，马上带上大姨夫嗷，拜拜！”webpack小老弟在接到npm老大哥的介绍后，立马动身参与到大项目中。准备狠狠地大展身手~~~本篇文章知识内容：webpack中常见的loaderwebpack中常见的 pluginswebpack中output 配置小老弟大吃一惊webpack哼着小曲：“画画的baby，画画的baby…”；过了半个小时车程后，终于见到了大工程负

webpack深入浅出系列：进阶篇前沿，本篇文章的讲解思路是以webpack的五大核心为线索，以webpack对象为第一视角来讲述（以前记得看过一个文笔非常厉害的技术啊婆写的，非常有趣。然后我就想着模仿一下）。该篇目的是为了掌握webpack的打包运作流程认识webpack.config.js认识plugins - HtmlWebpackPlugin认识entry正文开始大家好，我是webpack 大家好，我是一个专门做打包的打工仔，我的英文名叫webpack。今天npm老大哥找我

文章目录前言webpack是什么？为什么需要webpack？npm与webpack的关系？webpack的核心？webpack是如何运作的？前言最近常常反思，做前端仔也有些日子了，除了存款跟技术跟买的股票该涨的没涨之外；年龄、三脂这些倒是涨了不少。那我该怎么办？又没有马保国的武德，又不会卖燕窝；那只能勤加努力，把技术再往上提一提，起码要定位到高级工程师先。所以计划先把webpack这个前端家喻户晓的东西弄透彻一点。我跟你不一样，我要学的是真谛，直击灵魂的那一行代码。所以你跟我一样，请start me。

为什么面试官总爱让实现一个bind函数？他想知道些什么？一个小小的bind里面到底暗藏多少知识？今天来刨析一下实现一个bind要懂多少相关知识点，也方便我们将零碎的知识点串联起来。首先我们要明白bind函数的作用：返回一个能够改变this指向的函数。要点：改变this指向返回函数那么实现bind的思路大致就想出来了：创建一个待返回的函数，函数内部利用call/apply改变指向，call/apply的参数从arguments中获取。实现代码如下： Function.prototype

深度遍历DFS&广度遍历BFS定义深度遍历DFS：深度优先搜索属于图算法的一种，英文缩写为DFS即Depth First Search.其过程简要来说是对每一个可能的分支路径深入到不能再深入为止。广度遍历BFS：广度遍历是最简便的图的搜索算法之一，以广度优先，横向逐层地遍历，直到没有下一层为止。实现方式数据源：搜索其中的name值 const data = [ { name: 'a', chi...

防抖&节流定义防抖：防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。节流：节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次触发。使用场景搜索框按钮监听滚动频繁使用鼠标总的来说：任何东西被频繁的调用都有可能需要防抖或者节流去优化实现方式防抖 function showLog() { console.log('show'); } /...

这次让面试官非常满意：手撕深拷贝-------------人工分割线-------------浅拷贝这里不做介绍了，深拷贝的实现要点，除了一定要深！还要能兼容各种类型，如函数，正则、Date等等。其实日常业务开发中，Json.parse(Json.stringfy(obj))已经能够解决90%左右的克隆需求。还有Object.assign() Object.create()都能满足一定的克隆需求。但上班拧螺丝，面试造航母的精神不容小觑！本着专研精神去看待怎么才能写个牛逼、各种场合都能...

遍历对象属性的方式先定义数据源 let person = { name: 'tony', } let human = { eat: 'food', } // 设置prototype为human Object.setPrototypeOf(person, human); // person增加属性：不可枚举 age Object.defineProperty(person, "age", {

你不知道的闭包原理想要理解闭包之前，就必须理解函数的创建过程、活动变量AO、作用域链。我曾写过相关的文章网上相关对闭包的定义：MDN：函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中，每当函数被创建，就会在函数生成时生成闭包。你不知道的JavaScript：是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部...

在先了解this之前有必要了解一下-函数的生命周期在调用一个函数的时候是先经历函数的创建然后再到执行的过程。而this的指向是再创建阶段就已经完成了。关于创建及执行的阶段做的事情看下面图图：执行上下文生命周期描述创建上下文分别创建变量对象，确认作用域链，以及确定this指向执行创建阶段之后，则执行代码，这个时候会完成变量赋值，函数引用，及其他代码在创建函数的时候就确定this及作用域这些操作【对应上js是一门词法分析这个知识点是相互呼应的】，意思就是this在创建阶

在讲解命令模式之前我们先来了解一个生活中的命令模式场景：场景1：医院看病抓药：当你因为肾虚到医院看医生，医生一番操作之后得出结论：要吃个疗程【夏桑菊】、【小柴胡】（药名纯属虚构，真的肾虚就找医生），于是医生开了个药单【夏桑菊、小柴胡】，让你拿着药单到收费窗口；于是射射发抖的到收费窗口把药单【夏桑菊、小柴胡】给到收费人员，收费人员不管给你看医生的是谁，你是否得肾虚，他只要对着药单得收费项进行收费，完成后在药单上盖个收费章，然后让你拿着药单到取药窗口拿药，于是你又跑到取药窗口，将药单【夏桑菊、小柴胡】给到

在提高开发水平，往中高级前端工程师中，利用设计模式是必不可少的一条道路。掌握设计模式的思想远远比硬套重要，因为设计模式是一种思想，不局限于开发语言。但实际上由于语言的特性不同，往往在实现的时候会有不少差异。《javascript设计模式文章系列》是参照《JavaScript设计模式与开发事件》以及网络博客结合自身经验总结所写，希望在写下文章分享知识的同时能够加深记忆。javascript设计模式之单例模式如果你学过Java那么你会想到先定义单例类，然后提供getInstance静态方法返回单例对象.

继上篇文章深入剖析prototype、constructor、_proto_原理后，接下来整理、理解JS中的继承就水到渠成，一气呵成！话不多说，上个文章中说过，原型链最主要就是为了解决JS在面向对象中继承功能的实现。所以在js继承中第一种要介绍的方式当然是从原型链继承。过程中会插入我对该种继承产生过的一些疑惑并作出解答，希望这对你的理解能带来帮助原型链继承： function Father () { this.name = 'father'; } .

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》，《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用，但从未从更深的层面去思考他们是如何运作，为什么会产生这种特性，等等…这本书先从《JavaScript核心技术开发解密》开始讲解，分为两篇讲完，读完本篇你能学到：《核心提炼三》前言九、ES6与模块化9.1 常用语法知识9.2 模板字符串9.3 解析结构9.4 展开运算符9.5 Promise9.6 事件

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》，《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用，但从未从更深的层面去思考他们是如何运作，为什么会产生这种特性，等等…这本书先从《JavaScript核心技术开发解密》开始讲解，分为两篇讲完，读完本篇你能学到：五、作用域与作用域链在JS中，作用域是用来规定变量/函数可访问的规则5.1作用域5.1.1全局作用域在非严格模式，未定义的变量/函数会

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》，《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用，但从未从更深的层面去思考他们是如何运作，为什么会产生这种特性，等等…这本书先从《JavaScript核心技术开发解密》开始讲解，读完这本书你能学到：一、三种基础数据结构栈（stack）堆（heap）队列（queue）不要小看这些数据结构，他们不同的结构以及规则产生了我们平常所知道的一些特性：