online阳光-专注于大前端行业领域

前言 官方链接 DllPlugin一般与DllReferencePlugin配套使用， 😕 为什么这么说呢？ DllPlugin一般用来在webpack中创建一个单独的dll-only-bundles，同时生成一个名为manifest.json文件； DllReferencePlugin则是会通过引用上述第一步所创建出来的manifest.json文件，来告知如何加载模块；一般在webpack.config.js中使用，此插件会把 dll-only-bundles 引用到需要的预编译的依赖中，用某种方法实现了拆分 bundles，同时还大幅度提升了构建的速度，从字面意思上称之为：”动态链接引用插件+对应json配置使用” dll动态链接库 **动态链接库(Dynamic-link library，简写为DLL)**，是在winsows系统中实现共享函数库的一种方式，一般就是把一些经常回共享的代码制作成DLL文档，当可执行文件调用到DLL文档中的函数的时候，才会将DLL加载到内存中，当程序有需求时函数才进行过滤，可大幅降低存储！ 👽 DLL其实就是一个缓存文档，使用的时候，不 ...

前言官方链接 webpack中真正的”编译器执行者”，Compilation实例能够访问所有的模块和它们的依赖（大部分是循环依赖）。 它会对应用程序的依赖图中所有模块， 进行字面上的编译(literal compilation)。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。👇 是关于Compilation对象的组成结构： Compilation的工作流程是怎样的呢？ 👽 其实Compilation自身并没有做任何的动作，而是一堆的插件它们负责来实现的！因为Compiler创建完这个Compilation对象之后，就没有针对这个Compilation对象进行调用其相关的API了，而是将Compilation以及params作为参数，来触发Complier.hooks.thisCompilation 首先，针对一个上面最简单的webpack.config.js进行一个针对thisCompilation事件的一个插件执行队列分析，从上图中我们可以对应整理对应的执行队列： ...

前言官方链接 NormalModuleReplacementPlugin 允许我们将与 resourceRegExp 匹配的资源替换为 newResource。如果 newResource 是相对的，则它是相对于先前资源解析的。如果 newResource 是一个函数，它应该覆盖所提供资源的请求属性。☝ 官方的描述有点绕，简而言之，就是模块的在加载之前进行一个替换，这个替换按照正则表达式resourceRegExp所定义的表达式来实现替换，可以实现到类似于cross-env工具的效果：通过自定义变量的方式来达到根据不同的变量来尽性替换的目的！ 如何使用(官方例子)比如我们 🈶 👇 的一个webpack.config.js配置文件： 1234567891011121314module.exports = function(env){ var appTarget = env.APP_TARGET || 'VERSION_A'; return { // ... 此处隐藏其他的配置 plugins: [ new NormalModuleReplacement( ...

前言 官方链接单从其名字上来看，可以简单理解为创建module的工厂！ 而实际在阅读完它的源码的时候发现，其实它就真的是用来创建module的工厂！Compiler使用NormalModuleFactory模块生成各类模块，从entry入口开始，此模块回分解每个请求，解析配置文件webpack.config.js内容来查找进一步的请求，然后通过分解所有的请求以及解析新的文件来爬去全部的文件，最后，每个依赖项都会成为一个模块实例！！😕 那么NormalModuleFactory是如何从entry开始来解析的呢？解析过程是怎样的？ ☝ 从这里我们可以清楚地知晓NormalModuleFactory是被Compiler所创建的，通过传递一个配置对象，来创建的NormalModuleFactory对象的，那么这个配置对象中的属性又是怎么一回事呢？👉 首先，webpack中的文件都是一个个的模块，也就是说要将文件“转变”为模块，需要fs文件模块，通过读取文件来进行的源文件的读取，但是node中仅仅只能够识别到普通的js/json/node等文件格式，像图片资源等这些，又如何被识别到呢？我们 ...

前言 维护着一个data属性，主要负责记录与读取之前的构建记录，关于这个构建记录，官方的描述是：webpack 的 “records” 记录 - 即「用于存储跨多次构建(across multiple builds)的模块标识符」的数据片段，一般可以通过与webpack.config.js配合配置，直接讲对应的文件给输出出来，可以使用此文件来跟踪在每次构建之间的模块变化。只要简单的设置一下路径,就可以生成这个 JSON 文件 如何使用 配合webpack.config.js，在构建打包的时候输出对应的文件，便于调试调整优化打包配置文件，如下图所示： 监听的钩子生命周期有 Compiler.hooks.readRecords: 从之前的缓存(data，map对象)中读取缓存过的构建记录； Compiler.hooks.emitRecords: 写入构建缓存记录 Compiler.hooks.thisCompilation:

前言 webpack内部的自执行的插件，主要负责提供infrastructureLogger属性到compiler对象上，并创建对应的文件属性到compiler对象上，然后监听到compiler.hooks.beforeRun钩子容器中，将过程日志怼到标准输入中！用于基础设施水平的日志选项

前言 ProgressPlugin提供了一种自定义编译过程中进度报告方式的方法！ 官方链接 使用方式 一般地，我们可以通过创建一个ProgressPlugin对象并传递允许的可选参数，来实现自定义输出的目的！ 123456789// webpack.config.jsconst {ProgressPlugin} = require("webpack");module.exports = { plugins: [ new ProgressPlugin({ //... 参数说明见下表 }) ]}; ☝ 加入了对应的插件配置后，则有对应的 👇 的日志输出 参数名称 类型 描述 activeModules boolean 显示活动模块计数和一个正在进行的活动模块消息 dependencies boolean 显示依赖的数量 dependenciesCount boolean 显示的最小依赖数 entries boolean 显示入口数量 handler HandlerFunction 在每一步的过程中被调用 modules boo ...

前言 上文中我们所提及到的webpack创建了一个Compiler对象，由它来进行相关的打包任务动作的启动等，而且作为所有的插件所共同访问的到的一个编译器对象，😕 那么，这个Compiler是什么呢？？它做了哪些事情呢？ Compiler的组成 Compiler是什么?执行过程是怎样的？ Compiler 模块是 webpack 的主要引擎，它通过 CLI 或者 Node API 传递的所有选项创建出一个 compilation 实例。 它扩展（extends）自 Tapable 类，用来注册和调用插件。 大多数面向用户的插件会首先在 Compiler 上注册。首先，先来看一下 👇 的一副Compile的run方法的执行过程所触发的钩子函数，以及都有哪些插件在对应的钩子容器中添加了各自的钩子函数动作：☝ 我们可以清楚地了解到run方法的执行过程， 👇 将一一来分析每一个节点过程 1、触发beforeRun方法 在开始执行一次构建之前调用，compiler.run 方法开始执行后立刻进行调用 描述 值 传递参数 Compiler对象 调用方式 AsyncSer ...

前言 现在基本上每一个前端童鞋都与webpack在工作学习上都有所依赖，不管是以前还是未来，webpack都将占据非常重要的地位，而且都会与每一位前端童鞋息息相关，那么我是否可以像之前阅读其他的源码一样，来通过阅读webpack的源码，一步一步跟着代码来读懂这个webpack呢？起初我也是这么做的，然后我放弃了，其中的代码量之多，而且又超级复杂，错综复杂我觉得已经不能够用来形容这个webpack了，😫 不可能完全通过单纯的硬着头皮来阅读代码来理解，因此，我觉得需要整理一套方便自己来理解这个webpack的一整套方案来理解整个webpack框架，本次学习基于V5.75.0版本的！ webpack的组成结构 通过简单的通读webpack的相关源代码，自己整理了关于webpack的几个比较重要模块，如下图所示：关于几个模块，我觉得有点像战场上的战斗一般，指挥官(Compiler)根据上级指令(webpack.config.js配置)安排好一切之后，下达指令给士兵(Compilation)，士兵接收命令进行作战(编译/打包)，在作战的过程中，拥有一系列的装备(Plugin)的加持，使得士兵 ...

前言 在刚接触webpack的时候，仅仅只是懂得了关于如何通过简单的配置，来告知webpack如何进行一个打包工作，但是，对于webpack中具体是如何工作的，却全然不晓得，因此，觉得很有必要来对其中的执行过程进行一个深入的学习，在学习的过程中，又遇到了一个看着一头雾水的代码this.hooks.compiler.XXX系列方法，通过相关的资料查阅才知道，原来webpack中的compiler的相关的勾子函数的实现，都是由这个tabable来实现，因此，编写此文章来记录一下学习的过程，加深对tapable的理解，也可以在自己后续的框架中来使用到这个框架！ tapable是什么? 在经过相关的学习文档以及使用的方式得出的结果，其实tapable它是一个类似于connect中间件的一个框架，但是它又比connect框架又有更多的额外的特殊属性，正是由于这个特殊的属性，采用多次注册一次执行的方式，使得wepback能够实现复杂的多变的”类似生命周期”的相关函数方法: 容器的思维，在hooks对象中所定义的每一个属性都是一个容器，每个容器都可以有无限多的钩子函数； 容器中的钩子函数的执行 ...

前言 基于less的基础上进行的二次改造，项目主要是基于grunt + assemble + handlebars来进行搭建的，借助于handlebars-help所提供的便捷helpers工具类，来快速的对页面进行输出，并通过自定义的相关额外的helpers工具类，来实现文档的自动关联、自动锚点、自动配置的数据、按照既定的模版规范来输出对应的html页面内容 如何搭建一、安装相关的依赖12345678#第一步，执行命令：进行这个assemble模块的安装npm i assemble --save-dev#第二步，执行命令：安装对应版本的gruntnpm i grunt@0.4.3 --save-dev#第三步，执行命令：安装对应的grunt命令，主要是为了方便配合调试用的npm i grunt-cli --save-dev 二、初始化相关的配置以及环境🌠 根据官方的assemble的相关介绍，进行项目的初始化，对应的相关目录以及代码如下： 🌠 初始化Gruntfile.js文件内容： 🌠 创建对应的模版文件以及相关的页面文件 🌠 在调试、编写代码的过程中，难免会遇到或这或 ...

前言 在第一次接触Assemble的时候，觉得自己以前好像不是这么走过来的，自己以前是直接上jquery，或者原生的编码，对于项目的打包也是采用的最原始的方式来打包，没有去借助于一些便捷的打包工具，比如gulp、grunt等，等到后续慢慢接触久了，才有了这个想要“偷懒”的想法，在之前的关于grunt的学习中也了解到，grunt就是将一些经常做的事情，交由grunt框架来做，仅需要简单的传递对应任务以及其方法参数即可完成日常的测试、打包、部署动作！而Assemble则是基于grunt上的一个插件，该插件主要做的是通过既定的规则来限定项目的代码组织结构，在享受grunt打包的便利的同时，也顺便统一了前端静态化打包的规范，通过其额外提供的handlebar-helper方法工具库，来实现快速搭建一静态网站站点的目的！！！ assemble如何使用? 本章将采用’黄金圈’的规则来解读一下Assemble！！ assemble是什么? Assemble就是一个grunt插件，按照之前的插件的学习，插件对外暴露的都是在对应的tasks目录中，对外暴露的一方法，该方法接收的grunt作为参数来使 ...

前言 从express的脚手架中默认初始化的是handlebars模版引擎，那么它是怎样的一个引擎呢？平时在项目过程中是否有使用到它的一个场景呢？👉 我打算搭建多另外一个站点，模仿less的关于文档的快捷在线浏览中文站点，不想仅仅单纯通过翻译别人的网站，而自己根本不清楚其中的一个使用相关原理，因此，我开始这个自建CMS站点之路，而且从国内目前的前端来看，以前的前端一来就直接上手jquery，现在立马就进入vue/react/angular+webpack，但对比国外的开发佬，好像人家一来就是静态站点，然后配合相关的工具比如grunt打包，编写自己的CMS生态，借助于grunt来实现的grunt生态体系，我也在另外一篇文章中详细阐述了grunt是什么以及如何使用的，本文主要分享一下关于handlebars是如何使用的，以及在使用的过程中有一些不清晰的概念以及用法，记录到文档中，方便自己以及他人后续学习！ 官方介绍官方链接 什么是Handlebars?使用模版和输入对象来生成HTML或其他文本格式，该模版看起来像常规的文本，但是它带有嵌入式的Handlebars表达式首先先看看 👇 ...

前言 在完成一两天的通读grunt在线文档之后，原来grunt也并没有那么地复杂，首先他是一个nodejs程序，无非就是将反复重复的工作(比如有压缩、编译、单元测试、linting等操作)通过脚本来自动化，只需要进行一个命令的执行，即可完成一系列既定执行顺序的操作，可以理解为一系列固定流程的脚本集合，他的庞大主要在于他所提供的插件，在运行grunt的过程中，可以通过对插件的使用，来满足于实际的业务需要！ Gruntfile文件组成😕 这里有一个疑问，就是为毛这个Gruntfile.js要设计为对外暴露一函数对象？这个问题将留到 👇 来进行分析！ 😕 关于Gruntfile文件的组成描述如下： 由包裹的 1⃣ 函数包裹，也就是对外暴露一函数方法，该方法接收一grunt对象； 执行grunt的initConfig方法，并传递对应的配置； 加载这个initConfig配置中所需的任务/目标所依赖的三方任务(loadNpmTasks)； 注册这个配置文件对外暴露的任务API动作； grunt程序的运行过程 😕 关键在于liftup库，它主要用于执行一个CLI脚本程序，这里它写了一 ...

前言 终于轮到关于mongodb的学习了，作为 1⃣ 前端开发佬，想要进入全栈开发的领域，必不可少要涉及到数据库方面的编程技能。关于数据库的一个个人见解就是：它是一种特殊的文件格式，隐藏了对内容的直接访问，提供相关便捷的方法来操作文件内容，提供增删查改逻辑操作，满足业务需求！而本文要学习的这个mongodb是属于NoSQL(Not only SQL，不仅仅是SQL)的一种，它与传统的关系型数据库有很大的区别， 传统的关系型数据库有 👇 的一系列特性： 原子性(Atomicity)事务里的所有操作要么全部做完，要么都不做，事务成功的条件是事务里的所有操作都成功，只要有一个操作失败，整个事务就失败，需要回滚。比如银行转账，从A账户转100元至B账户，分为两个步骤：1）从A账户取100元；2）存入100元至B账户。这两步要么一起完成，要么一起不完成，如果只完成第一步，第二步失败，钱会莫名其妙少了100元 一致性(Consistency)数据库要一直处于一致的状态，事务的运行不会改变数据库原本的一致性约束。例如现有完整性约束a+b=10，如果一个事务改变了a，那么必须得改变b，使得事务 ...

小技能 在习惯了webstorm这ide之后，转战vscode的时候，🈶 着诸多使用上的不习惯，特别是关于这个编码提示，个人已经习惯了webstorm自带的代码提示功能，在上手vscode的时候，发现这个也需要自己来整🌠 可以使用@type来进行日常coding的提示，仅仅需要在项目目录中运行以下脚本： 1npm install --save-dev @types/node 引入types模块进行代码提示，然后对应的再新增一文件：config.js，并在该文件中维护以下内容： 12345{ "compilerOptions": { "types": ["node"] }} 配置完成后，即可看到如下的一个代码提示效果：

前言 在当今的网站编码完成后，要在广域网上能够访问到这个网站，没有https证书，是不可能能够正常被网络上的用户所能够访问到的，必须在有关的网站上申请https证书，挂到对应的服务器上，才能够保证被正常地访问到，那么什么是https证书呢？它与本文所要介绍的tls有什么关联？🌠 HTTPS 是在 HTTP 协议基础上实施 TLS 加密，所有网站以及其他部分 web 服务都使用该协议。因此，任何使用 HTTPS 的网站都使用 TLS 加密。😕 什么是TLS协议呢？它有什么作用？工作过程是怎样的？如何来使用TLS？ 传输层安全性（Transport Layer Security，TLS）是一种广泛采用的安全性协议，旨在促进互联网通信的私密性和数据安全性。TLS 的主要用例是对 web 应用程序和服务器之间的通信（例如，web 浏览器加载网站）进行加密。TLS 还可以用于加密其他通信，如电子邮件、消息传递和 IP 语音 (VoIP) 等 TLS的作用 加密：隐藏从第三方传输的数据； 身份验证：确保交换信息的各方是他们所声称的身份； 完整性：验证数据未被伪造或篡改 TLS的工作过程 ...

前言 平时工作过程中基本上天天都在和TCP打交道，😕 但 🈶 多少童鞋又能够清楚地知晓关于TCP是什么，它的一个工作过程又是怎样的呢？因此，我想整理本次的一个学习文档，来帮助自己更好的理解关于什么是TCP？他 🈶 什么特点？他是怎样工作的？来更好地理解程序/代码的一个工作过程！ 什么是TCP **传输控制协议(Transmission Control Protocol)**，是一种面向连接的、可靠的、基于字节流的传输层通信协议。TCP旨在适应支持多网络应用的分层协议层次结构。 连接到不同但互连的计算机通信网络的主计算机中的成对进程之间依靠TCP提供可靠的通信服务。 应用层向TCP层发送用于网间传输的、用8位字节表示的数据流，然后TCP把数据流分区城适当长度的报文段，之后TCP把结果包传给IP层，由IP层来通过网络将包传送给接收端的TCP层，而且为了保证不丢包，给每一个包分配一个序号，同时序号叶保证了传送到接收端的包按序接收，然后接收端对已成功收到的包发回一个相应的确认(ACK)，如果发送端在合理的往返延(RTT)内未收到确认，那么对应的数据包就被认为是丢包了，然后重新发起传 ...

前言 在经历了一系列前端开发的项目之后，对于npm的了解，只是知道它可以用来安装项目的依赖库，但殊不知关于npm，其他它还有更多更好好玩的地方。首先，我们需要明白的是：NPM借助于CommonJS规范，将CommonJS规范给实现出来，从而实现包的管理 查看帮助 在学习的过程中，主要借助于官方中文文档，来协助自己对于这个npm的一个学习另外，在实际的编码过程中，还可以借助于原本npm脚本命令来学习关于npm的相关命令 查看帮助：npmscript1npm 通过直接输入npm命令，可直接查看到npm所能够支持的所有脚本，然后再借助于npm help <具体命令>来查看具体的命令的作用，以及可接受的参数，比如有 👇 的命令：script1npm help login 安装依赖包 **NPM最常用的命令用法，其执行语句是npm install XXX，这里的XXX代表的就是一个包名，执行该命令之后，将会在当前目录下创建node_modules目录，并将所依赖的包名(这里是XXX)，对应在node_modules目录中创建XXX目录，然后我们可以借助于require(' ...

前言 时间是真实存在的”变量”，必须重视它的一个存在感。假如活到80岁，那么每一个人都将拥有960个月的生命时间(这里我们假定成为960个格子)，每消耗一个月，格子的数量就减少一个，这听起来非常地震撼。既然我们的时间是如此般的有限，那么我觉得更加有必要来深入了解什么是时间？如何才能拥有/赚取更多的时间？ 什么是时间在固定稀缺时间内来赚取更多的时间 马👨曾说过类似这样子一句话：有的人将365天活成了1天。🈯 的是有的人每天都在重复一样的事情，这对于时间的利用效率极为低下，唯有出现了不同的经历之后，才有可能出现新的意义，因此，我们应当活在当下，给自己”赚取”更多的时间。时间的赚取可以分为两个维度来分析： 单位时间内做事的数量 单位时间内做事的类型两者都是必须要在短时间通过大量的练习迅速达到一个再花时间下去，投入与产出比就不划算了的想法，尝试切到不同的事情上去安排时间 每个人的时间都很重要 每个人假定都拥有同等稀缺的960个月的时间，自己的时间重要了，那么别人的时间也是肯定同等地重要，因此在珍惜自己时间的同时，也尽量不去浪费到别人的时间，采用一种共赢的态度。当我们处理一件事情的时 ...