![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端工程化相关
文章平均质量分 89
前端工程化相关知识点学习
玉案轩窗
这个作者很懒,什么都没留下…
展开
-
Vite原理学习之HMR
前言Vite是基于ESM的构建工具,预编译和按需编译机制是其在项目启动以及快速更新的核心。除了这两个机制外,还存在一个主流构建工具都存在一个机制即HMR。HMR是Hot Module Replacement的简写,意思是模块热替换,即允许在运行时更新各种模块,而无需进行完全刷新。HMR大大提高了开发阶段的更新的响应速度,避免全量更新,在提高效率的同时大大提高了开发体验。原创 2022-01-09 17:46:04 · 3564 阅读 · 1 评论 -
Vite原理学习之按需编译
前言当Vite启动开发服务器之前会完成依赖预构建工作,这个工作整个流程简单来说是通过入口文件扫描所有源码分析相关import语句得到使用的第三方依赖包名,之后使用esbuild对依赖进行编译,至此完成整个预编译过程。之后会启动开发服务器并在相关端口进行监听,当启动开发服务器后,Vite会如何处理源码呢?整个过程的执行逻辑具体是什么样的?这篇文章就是来学习Vite开发服务器启动后整个的处理过程。原创 2022-01-02 14:40:27 · 4078 阅读 · 0 评论 -
Vite原理学习之预编译
前言Vite是下一代的前端开发与构建工具,为什么称为下一代?根本原因在于其基于原生ES Module。在目前的前端工程化生态中,webpack、rollup、esbuild等非常流行,而Vite真是构建在一些流行的技术上。Vite的出现实际上是前端模块规范发展到现在自然出现的产物,它并不是首个基于ES Module的构建工具,还有一些同类型的工具例如Snowpack、@web/dev-server等等。原创 2021-12-26 16:07:05 · 2633 阅读 · 0 评论 -
webpack源码之模块编译+输出最终文件
前言紧接着上一篇run方法的来讲,当执行逻辑执行到moduleFactory.create的回调函数中时,回调函数中逻辑主要有三点:addModule:添加模块到指定地方onModule:entry对应模块赋值操作buildModule:编译模块重要逻辑不言而喻即buildModule,本篇即以此处为起点分析webpack的主要的编译逻辑。buildModule之前相关逻辑首先梳...原创 2020-01-18 13:33:34 · 1151 阅读 · 0 评论 -
webpack源码之输出文件分析
前言webpack完整的一次初始化、编译、输出的逻辑前几篇文章有了介绍,作为目前最受欢迎的打包工具其内部的实例逻辑必然是复杂,一些细节点我觉得暂不必深究,而且webpack还有一些其他的点值得去探究,例如:Tree-shaking模块热替换scope hoisting这些点之后会较为深入的学习了解,本文主要分析最基本的输出文件的结构和逻辑,主要想要了解点如下:输出文件的结构和逻辑...原创 2020-01-21 18:51:15 · 774 阅读 · 0 评论 -
webpack源码之初始化参数
前言webpack是目前最流行的前端构建工具,了解并熟悉它是必要的。2019年初定下了阅读Vue和Webpack的源码计划,Vue的源码阅读大致完成,前段时间稍微繁忙些,2019年最后一个月才开始着手阅读webpack的源码,初步完成年前的计划。流程逻辑首先查看webpack源码目录下package.json文件,主要关注以下的点: "bin": { "webpack": "./...原创 2019-12-07 16:46:46 · 378 阅读 · 0 评论 -
webpack源码之调试准备
前言webpack作为目前前端最热门的构建工具之一,webpack的源码逻辑是非常复杂的,实际上webpack系列的源码文章也是针对其流程尽可能去挖掘,旨在加深学习其思想以及相关概念。本系列文章的webpack版本是3.4.0。首先从调试准备开始,会通过一些简单实例来学习webpack打包流程。调试准备...原创 2021-01-05 11:54:35 · 450 阅读 · 0 评论 -
webpack源码之run方法(创建模块对象逻辑)
前言上篇文章是webpack执行逻辑即Compiler对象的生成,本文紧接着webpack函数之后的逻辑,主要是Compiler对象的run方法的执行逻辑。Run方法执行前在执行run方法执行前,webpack函数执行前还有一些其他重要的逻辑,也是之后会一一说明的这里暂不展开说明。progress参数支持该参数是用于打印编译的进度,实际上是创建/lib/ProgressPlugin插件对...原创 2020-01-07 20:51:59 · 1062 阅读 · 0 评论 -
webpack源码之loader
前言loader是webpack核心概念之一,webpack官网对其详细的描述。首先先简单了解下loader的概念:loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。loader 描述了 webpack 如何处理非JavaScript模块,并且在 bundle 中引入这些依赖。在webpack中构建打包除了js文件和json文件,其他任何文件格式的文件使用import或者require加载都需要对应的loader来处理。这是我非常感兴趣原创 2021-01-05 19:40:19 · 512 阅读 · 0 评论 -
webpack源码之webpack函数
前言本篇紧接着上篇初始化参数,上篇文章中主要查看bin/webpack.js文件中合并相关命令行参数的逻辑得知下一个逻辑入口即webpack函数执行以及相关Compiler对象方法的执行。本篇主要梳理webpack函数执行过程中的相关的逻辑。流程逻辑流程分析的实例webpack配置:const path = require('path');module.exports = { /...原创 2019-12-12 20:41:29 · 1055 阅读 · 0 评论