一、HMR 介绍Hot Module Replacement（以下简称：HMR 模块热替换）是 Webpac
转载
2022-10-19 13:54:56
132阅读
1 Tapable简介 webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。本文主要介绍一下Tapable中的钩子
转载
2022-07-14 09:26:41
100阅读
学习时间：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阅读
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阅读
前言随着前端技术的飞速发展，前端开发也从静态页面发展到了web应用，简单的静态页面已经不能满足前端开发的需求。这时涌现了大量的工程化工具，例如早期的gulp，grunt等任务流工具，他们类似于使用javascript完成了shell的一些功能。这些工具虽然解决了大量静态文件的批处理问题，但本质上还是对静态文件的操作。而webpack的出现将前端工程化提升到了一个新的高度，它可谓是将前端的模块化功能发挥到了极致，进而也成为了目前前端市场最火爆的打包工具。在这篇文章里，我们将会为您分析一下webpack
原创
2022-03-24 17:58:01
184阅读
loader原理loader 概念帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。loader 执行顺序了解执行顺序之前，需要先了解loader的分类pre： 前置 loadernormal： 普通 loaderinline： 内联 loaderpost
转载
2022-06-10 17:40:36
65阅读
前言随着前端技术的飞速发展，前端开发也从静态页面发展到了web应用，简单的静态页面已经不能满足前端开发的需求。这时涌现了大量的工程化工具，例如早期的gulp，grunt等任务流工具，他们类似于使用javascript完成了shell的一些功能。这些工具虽然解决了大量静态文件的批处理问题
原创
2021-04-15 16:38:17
517阅读
statsstats是控制 webpack 如何打印出开发环境或者生产环境的打包结果信息。如果是开发环境使用 WDS，还可以在devServer.stats配置。可以为stats指定一个字符串：预设描述'normal'默认值，标准输出'errors-only'只在发生错误时输出'errors-warnings'只在发生错误或有新的编译时输出'minimal'只在发生错误或新的编译开始时输出'non
转载
2021-01-19 22:01:17
1702阅读
2评论
再总结一下： 1.读取配置，开始Compilation，2.创建module， 从入口开始resolve，对loaders resolve，执行loaders，parse成AST，处理AST，为module添加dependency3.递归处理，直到全部转为modules4.构造module grap
原创
2021-09-01 17:02:40
287阅读
去年6月，开始打算认真的看一个大框架的源码， 当时选择了看webpack... https://juejin.im/post/5bf7c2186fb9a049fd0f7e8a 主要在看的是这里的系列文章， 从tapable开始看.. 学习过程的一路中， 不知不觉，7、8个月过去了， 一直到今天，终于
原创
2021-09-05 10:25:49
154阅读
webpack本质上是一种事件流的机制，它的工作流程就是将各个插件串联起来，而实现这一切的核心就是Tapable，webpack中最核心的负责编译的Compiler和负责创建bundles的Compilation都是Tapable的实例。Webpack 可以认为是一种基于事件流的编程范例，内部的工作流程都是基于 插件 机制串接起来；而将这些插件粘合起来的就是webpack自己写的基础类 Tapab
原创
2023-03-18 17:42:38
149阅读
1. webpack编译流程 初始化参数：从配置文件和Shell语句中读取与合并参数，得出最终的参数； 开始编译：用上一步得到的参数初始化Compiler对象，加载所有配置的插件，执行对象的run方法开始执行编译； 确定入口：根据配置中的entry找出所有的入口文件 编译模块：从入口文件出发，调用所
转载
2020-04-23 14:04:00
552阅读
2评论
目录：从分析源码告诉你如何搭建代码架构 前端晋升必知必会之初探数据结构与算法 你不知道的vue那些事 - 网易内部花式玩转vue Vue编译器 - 编译原理初探 webpack不再神秘-教你带你自己写一个loader 网易面试-高级前端之VUE数据响应式实现 从源码探究构建工具之手动实现webpack vuex源码探秘—带你走进一个崭新的世界从分析源码告诉你如何搭建代码架构...
原创
2021-06-07 16:45:57
289阅读
新建一个项目，再新建一个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从命令行到打包完成的整体流程，我们知道了webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。社区里很多webpack的plugin，但是具体到我们的项目并不一定适用，这篇博客告诉你如何入手写一个plugin，然后分析源码相关部分告诉你你的plugin是如何工作。知其然且知其所以然。 该系列博客的所有测试代码。从黑盒角度学习写一个pl
转载
2017-05-08 16:50:06
975阅读
webpack-bundle-analyzer，推荐使用
新版 vue-cli (旧版按照新版的进行配置即可)已经集成该插件，在项目的 package.json 文件中注入如下命令，然后运行(npm run analyze)，默认会打开 http://127.0.0.1:8888 作为展示。“analyze”: “NODE_ENV=production npm_config_rep
转载
2017-08-09 14:07:00
122阅读
2评论
2. 预备知识 2.1 toStringTag Symbol.toStringTag 是一个内置 symbol，它通常作为对象的属性键使用，对应的属性值应该为字符串类型，这个字符串用来表示该对象的自定义类型标签，通常只有内置的 Object.prototype.toString() 方法会去读取这个
转载
2020-04-23 14:02:00
51阅读
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评论
(() => { // webpackBootstrap var __webpack_modules__ = ({ "./src/title.js": /*!***
原创
2022-11-23 00:23:00
301阅读
