前言 近期在折腾这个chatGPT的时候，发现在进行字符串的拼接过程中，如果出现了代码的话， 😕 一旦在代码中出现换行符的时候，marked库就自动将其识别为一个code-block，导致我们在解析这个字符串内容的时候，一下子出现普通文字，一下子出现代码块，硬生生给自己找了坑！在经过两天的奋战后，问了一下chatGPT，然后它居然堂而皇之地承认了！ 在经过一大段时间的...

前言官方文档 既然已经有ESLint以及stylelint了，为啥还要有这个prettier呢？👽 我们都知道，项目团队在研发过程中，必须严格遵循统一的一个代码规范，即便是拥有了ESLint与stylelint的加持，在实际的编码过程中，也还是难免需要借助于插件、三方库来协助规范整个团队的项目开发，因此，我们需要在项目中通过统一提供的编码规则配置方案，由项目自身的开发...

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on ...

前言Stylelint官方文档 与之前学习的 ESLint 相类似，Stylelint作为一个css linter，可帮助我们避免编写错误的css样式代码，并强制执行预先协商好的“约定”配置，配置可从标准的配置继承而来，也可重写！ Stylelint的相关特性 提供的现成的业界css语法和功能的自定义规则； 支持插件的方式，可创建自定义规则； 提供自我修复的能力，自...

前言ESLint官方文档 根据配置方案，来发现并报告 js中的问题以及提供建议的工具，目的是使代码风格更加一致，同时避免不必要的错误！👉 由于要发现代码中的错误，因此ESLint必不可少地需要解析代码文件(采用Espree，从Acorn基础上演变而来)，对解析生成的AST树进行方案评估。另外，在配置文件中的每一个规则都是一个个的插件！！ 😕 这里提及到配置方案，也...

前言 在刚开始接触这个express框架的时候，利用其脚手架命令，来创建项目的过程中，发现其中 🈶 一种渲染引擎: handlebars，这种引擎在之前的学习文档中 handlebars的学习与使用用 已经有具体提及到，本章节主要想将自己在使用express + hbs搭建这个SSR渲染页面的过程给记录下来，方便后续自己 🈶 来及时查阅！ 一、express项目初始...

前言最近，任何行业都被chatGPT影响：一款好用到超出认知的聊天机器人，其强大的学习和处理收集能力，能够完美地编撰文案、编程的辅助(从咱这两次周末的分享会议总结得知)、语种翻译，还能进行绘制插画，提供法律知识工作等等！基本上是你要什么，他就给什么，而且还能够超出自己想象地来提供，可以说是目前人工智能界最靓的仔！ 😕 那么，我们是不是需要担忧一个问题：我们怕不是要失业了...

前言官方文档 关于HtmlWebpackPlugin插件的时间，相信不少童鞋应该都是比较熟悉的了，在一些现成的脚手架(像vue-cli、react-cli等开源三方脚手架)中，都被集成进去成为其核心成员脚手架模块，负责将结果目标内容文件给输出出来， 0⃣ 配置的方式来快速开发这个业务项目， 😕 但是，在实际的项目开发过程中，避无可避地需要针对现有的采用脚手架搭建起来的...

前言webpack官方loader介绍 关于webpack中的Loader，平时项目中可能比较少用到，一般的脚手架程序都自动集成相关的loader，但是如果我们能够将不同的loader给搭配起来，形成项目自身特色的loader集合体的话，在开发/编码过程中可以提升不少的效率，而且也让程序可以 🈶 更健壮的稳定性！😕 那么什么是Loader？如何使用Loader？Lo...

前言 本文主要着重介绍关于webpack中的模块是如何管理的，其实在网络上已经也有不少的文章关于ES6、CommonJS、AMD的相关介绍了，本文主要侧重于这个模块管理的使用方式！三者都是对模块进行依赖管理的目的，实现同步/异步加载的目标！ ESM ESM主要包含 🈶 2⃣ 个关键词：import和export！ export export 语句用于从模块中导出实...

前言DefinePlugin官网链接 允许在编译时将你代码中的变量替换为其他值或表达式，它并不是变量赋值，而是在编译期间进行字符串的精准匹配与替换！可以理解为，我们在webpack打包的项目中，通过在配置文件(webpack.config.js)中使用插件DefinePlugin，并传递给该插件对应的变量/表达式，都可以在项目中的*.js文件中访问到这些变量/表达式的定...

我是谁 webpack中与assets资源进行交互的模块，逐渐通过对NormalModuleFacotry.hooks.createParser、NoemalModuleFactory.createGenerator、Compilation.hooks.renderManifest等几个钩子容器函数的监听！ 干预的钩子函数 通过提供的干预的钩子函数，创建对应的Parse...

前言 作为webpack中的代码生成器插件，主要负责将对应的chunk生成对应的结果字符串内容！在开始具体解析之前，首先，现看一下 👇 2⃣ 个最简单的结果生成情况对比！ 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354...

前言 Module，作为webpack中的基本模块单元，继承于DependenciesBlock，使其具备缓存其他模块而形成的依赖关系，也就是说，webpack中的关于模块的定义声明皆来自于此！我们所定义的一个个文档都是一个个的模块，模块之间允许互相依赖，而依赖在程序中的表现形式，则是以DependenciesBlock中的Dependency[]数组来存储的 Depe...

前言 作为实际开始编译的入口，该插件由webpack的核心默认插件自动加载，无需额外通过配置文件引入！ 入口的开始 通过对该插件的代码阅读后发现，该插件主要针对两个钩子容器函数设置监听动作 compiler.hooks.compilation compiler.hooks.make 🌠 下面我们关键分析一下这个compiler.hooks.make触发时，做了...

前言 在阅读到Compilation的代码执行过程时，发现有一个隐藏的异步队列执行者，😕 这里为啥要单独整一篇文章来阐述这个异步队列执行者呢？我觉得应该是在于它的一个比较独特的设计理念打动了我，下面就来具体分析一下并尝试来使用这个异步队列的执行者！添加完成一个元素后，自动执行一个对应的回调动作，并能够实现与父AsyncQueue对象共享的“线程队列”资源 如何使用？1...

前言 官方链接 DllPlugin一般与DllReferencePlugin配套使用， 😕 为什么这么说呢？ DllPlugin一般用来在webpack中创建一个单独的dll-only-bundles，同时生成一个名为manifest.json文件； DllReferencePlugin则是会通过引用上述第一步所创建出来的manifest.json文件，来告知如何加载...

前言官方链接 webpack中真正的”编译器执行者”，Compilation实例能够访问所有的模块和它们的依赖（大部分是循环依赖）。 它会对应用程序的依赖图中所有模块， 进行字面上的编译(literal compilation)。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(rest...

前言官方链接 NormalModuleReplacementPlugin 允许我们将与 resourceRegExp 匹配的资源替换为 newResource。如果 newResource 是相对的，则它是相对于先前资源解析的。如果 newResource 是一个函数，它应该覆盖所提供资源的请求属性。☝ 官方的描述有点绕，简而言之，就是模块的在加载之前进行一个替换，这个...

前言 官方链接单从其名字上来看，可以简单理解为创建module的工厂！ 而实际在阅读完它的源码的时候发现，其实它就真的是用来创建module的工厂！Compiler使用NormalModuleFactory模块生成各类模块，从entry入口开始，此模块回分解每个请求，解析配置文件webpack.config.js内容来查找进一步的请求，然后通过分解所有的请求以及解析新的文...