Module与其家族们

webpack/ module
Module与其家族们

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

EntryOptionPlugin

webpack/ plugin
EntryOptionPlugin

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

webpack中的AsyncQueue

webpack/ AsyncQueue
webpack中的AsyncQueue

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

DllReferencePlugin

webpack/ plugin
DllReferencePlugin

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

webpack中的Compilation

webpack/ Compilation
webpack中的Compilation

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

NormalModuleReplacementPlugin

webpack/ plugin
NormalModuleReplacementPlugin

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

NormalModuleFactory的工作过程

webpack/ NormalModuleFactory
NormalModuleFactory的工作过程

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

SyncModuleIdsPlugin

webpack/ plugin
SyncModuleIdsPlugin

前言 维护着一个data属性,主要负责记录与读取之前的构建记录,关于这个构建记录,官方的描述是:webpack 的 “records” 记录 - 即「用于存储跨多次构建(across multiple builds)的模块标识符」的数据片段,一般可以通过与webpack.config.js配合配置,直接讲对应的文件给输出出来,可以使用此文件来跟踪在每次构建之间的模块变化。...

webpack插件-NodeEnvironmentPlugin

webpack/ plugin
webpack插件-NodeEnvironmentPlugin

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

webpack插件-ProgressPlugin

webpack/ plugin
webpack插件-ProgressPlugin

前言 ProgressPlugin提供了一种自定义编译过程中进度报告方式的方法! 官方链接 使用方式 一般地,我们可以通过创建一个ProgressPlugin对象并传递允许的可选参数,来实现自定义输出的目的! 123456789// webpack.config.jsconst {ProgressPlugin} = require("webpack");module....

webpack中的Compiler

webpack/ Compiler
webpack中的Compiler

前言 上文中我们所提及到的webpack创建了一个Compiler对象,由它来进行相关的打包任务动作的启动等,而且作为所有的插件所共同访问的到的一个编译器对象,😕 那么,这个Compiler是什么呢??它做了哪些事情呢? Compiler的组成 Compiler是什么?执行过程是怎样的? Compiler 模块是 webpack 的主要引擎,它通过 CLI 或者 No...

webpack学习计划

webpack
webpack学习计划

前言 现在基本上每一个前端童鞋都与webpack在工作学习上都有所依赖,不管是以前还是未来,webpack都将占据非常重要的地位,而且都会与每一位前端童鞋息息相关,那么我是否可以像之前阅读其他的源码一样,来通过阅读webpack的源码,一步一步跟着代码来读懂这个webpack呢?起初我也是这么做的,然后我放弃了,其中的代码量之多,而且又超级复杂,错综复杂我觉得已经不能够用...

tapable使用与源码分析

webpack/ tapable
tapable使用与源码分析

前言 在刚接触webpack的时候,仅仅只是懂得了关于如何通过简单的配置,来告知webpack如何进行一个打包工作,但是,对于webpack中具体是如何工作的,却全然不晓得,因此,觉得很有必要来对其中的执行过程进行一个深入的学习,在学习的过程中,又遇到了一个看着一头雾水的代码this.hooks.compiler.XXX系列方法,通过相关的资料查阅才知道,原来webpac...

使用assemble+hbs来构建基础在线man站点

工具插件/ grunt
使用assemble+hbs来构建基础在线man站点

前言 基于less的基础上进行的二次改造,项目主要是基于grunt + assemble + handlebars来进行搭建的,借助于handlebars-help所提供的便捷helpers工具类,来快速的对页面进行输出,并通过自定义的相关额外的helpers工具类,来实现文档的自动关联、自动锚点、自动配置的数据、按照既定的模版规范来输出对应的html页面内容 如何搭建...

assemble的使用与源码分析

工具插件/ grunt
assemble的使用与源码分析

前言 在第一次接触Assemble的时候,觉得自己以前好像不是这么走过来的,自己以前是直接上jquery,或者原生的编码,对于项目的打包也是采用的最原始的方式来打包,没有去借助于一些便捷的打包工具,比如gulp、grunt等,等到后续慢慢接触久了,才有了这个想要“偷懒”的想法,在之前的关于grunt的学习中也了解到,grunt就是将一些经常做的事情,交由grunt框架来做...

handlebars的用法

javascript/ javascript模版引擎/ handlebars
handlebars的用法

前言 从express的脚手架中默认初始化的是handlebars模版引擎,那么它是怎样的一个引擎呢?平时在项目过程中是否有使用到它的一个场景呢?👉 我打算搭建多另外一个站点,模仿less的关于文档的快捷在线浏览中文站点,不想仅仅单纯通过翻译别人的网站,而自己根本不清楚其中的一个使用相关原理,因此,我开始这个自建CMS站点之路,而且从国内目前的前端来看,以前的前端一来就...

grunt的学习与应用

打包/ nodejs/ grunt
grunt的学习与应用

前言 在完成一两天的通读grunt在线文档之后,原来grunt也并没有那么地复杂,首先他是一个nodejs程序,无非就是将反复重复的工作(比如有压缩、编译、单元测试、linting等操作)通过脚本来自动化,只需要进行一个命令的执行,即可完成一系列既定执行顺序的操作,可以理解为一系列固定流程的脚本集合,他的庞大主要在于他所提供的插件,在运行grunt的过程中,可以通过对插件...

mongodb在云服务器上安装与本地联调使用

数据库/ mongodb
mongodb在云服务器上安装与本地联调使用

前言 终于轮到关于mongodb的学习了,作为 1⃣ 前端开发佬,想要进入全栈开发的领域,必不可少要涉及到数据库方面的编程技能。关于数据库的一个个人见解就是:它是一种特殊的文件格式,隐藏了对内容的直接访问,提供相关便捷的方法来操作文件内容,提供增删查改逻辑操作,满足业务需求!而本文要学习的这个mongodb是属于NoSQL(Not only SQL,不仅仅是SQL)的一种...

在vscode中开启代码提示

编码规范/ vscode
在vscode中开启代码提示

小技能 在习惯了webstorm这ide之后,转战vscode的时候,🈶 着诸多使用上的不习惯,特别是关于这个编码提示,个人已经习惯了webstorm自带的代码提示功能,在上手vscode的时候,发现这个也需要自己来整🌠 可以使用@type来进行日常coding的提示,仅仅需要在项目目录中运行以下脚本: 1npm install --save-dev @types/...

×
这一句 是 在 2015.09.23 23:05:17 收藏的!