去年6月，开始打算认真的看一个大框架的源码， 当时选择了看webpack... https://juejin.im/post/5bf7c2186fb9a049fd0f7e8a 主要在看的是这里的系列文章， 从tapable开始看.. 学习过程的一路中， 不知不觉，7、8个月过去了， 一直到今天，终于
原创
2021-09-05 10:25:49
154阅读
再总结一下： 1.读取配置，开始Compilation，2.创建module， 从入口开始resolve，对loaders resolve，执行loaders，parse成AST，处理AST，为module添加dependency3.递归处理，直到全部转为modules4.构造module grap
原创
2021-09-01 17:02:40
287阅读
1. webpack编译流程 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译； 确定入口：根据配置中的entry找出所有的入口文件 编译模块：从入口文件出发，调用所
转载
2020-04-23 14:04:00
552阅读
2评论
一、HMR 介绍Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpac
转载
2022-10-19 13:54:56
132阅读
新建一个项目，再新建一个src文件夹，里面有三个文件，word.js,message.js,index.js word.js export const word = 'hello'; message.js message.js import { word } from './word.js'; co
转载
2019-05-26 20:16:00
90阅读
2评论
前言 webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务，大家只需在 webpack 的配置中，增加 devServer 的配置来启动。devServer 配置的本质是 webpack-dev-server 这个包提供的功能，而 webpack-dev-mi
转载
2020-09-22 19:11:00
118阅读
2评论
通过第一部分的学习，我们已经可以分析一个js的文件。这节课我们学习Dependencies Graph，也就是依赖图谱。对所有模块进行分析。先分析index.js。index.js里面引入了messgage.js。再去分析message，一层一层的去分析，要想实现这个效果，需要去写个函数。 cons
转载
2019-05-26 21:48:00
104阅读
2评论
Webpack 的使用目前已经是前端开发工程师必备技能之一
原创
2021-08-04 13:48:12
172阅读
1 Tapable简介 webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。本文主要介绍一下Tapable中的钩子
转载
2022-07-14 09:26:41
94阅读
前言虽然webpack5已经发布了一段时间了，但一直都没有研究过，最近正好在做微前端相关的调研，恰好看到了webpack5的模块联邦与微前端的相关方案，便想着探究下模块联邦的相关源码。（ps：关于微前端，稍微说一句，个人觉得在选取微前端方案的时候可有结合现有资源以及形态进行相关取舍，从共享能力、隔离机制、数据方案、路由鉴权等不同维度综合考量，个人使用最小的迁移成本，渐进式的过渡，才是最优的选择。）
转载
2021-01-20 09:10:12
802阅读
2评论
前文 最近在看webpack的源码，发现有个比较头疼的点是：代码看起来非常跳跃，往往看不到几行就插入一段新内容，为了理解又不得不先学习相关的前置知识。层层嵌套之后，发现最基础的还是tapable模型，因此先对这部分的内容做一个介绍。 引子-webpack的基本流程 Webpack的流程可以分为以下三
转载
2020-11-23 17:46:00
160阅读
2评论
学习时间：2020.06.14学习章节：《Webpack HMR 原理解析》一、HMR 介绍
Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpack 提供的一个非常有用的功能，它允许在 JavaScript 运行时更新各种模块，而无需完全刷新。Hot Module Replacement (or HMR) is one of the most useful
原创
2022-10-24 10:23:08
61阅读
Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. T
转载
2016-08-17 02:49:00
229阅读
2评论
Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing
转载
2017-05-05 18:37:00
236阅读
2评论
CSS有Less、Scss、Stylus等预处理器，它们使CSS可以和编程语言一样有变量、控制语句等功能，这大大提高了CSS代码复用率、开发效率。 JavaScript有TypeScript、Flow等超集，TypeScript使得JavaScript更适合开发大型应用软件，减少多人协同开发带来的， ...
转载
2021-10-01 23:33:00
367阅读
2评论
1. 初识webpack 安装 Webpack 在安装 Webpack 前，你本地环境需要支持 node.js。 使用 npm 安装 webpack： npm install webpack webpack-cli -g //全局安装 npm install webpack webpack-cli ...
转载
2021-10-20 19:50:00
201阅读
2评论
什么叫webpack：webpack 是一个模块打包工具,起初它只能打包js文件，发展到现在可以打包任何
原创
2019-12-02 22:02:41
238阅读
目录1. 什么是webpack？1.1 JavaScript模块化1.2 CSS模块化1. 什么是webp
原创
2022-07-12 21:07:59
253阅读
webpack命令入口解析当开始断点调试后，webpack就会开始执行node_modules/webpack/bin/webpack.js文件，文件如下，其中做了一些注释：#!/usr/bin/envnode//正常执行返回process.exitCode=0;//运行某个命令construnCommand=(command,args)=>{...};//判断某个包是否安装constisI
原创
2021-04-11 20:07:59
302阅读
