![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
webpack原理
文章平均质量分 66
webpack常见插件解析
Young soul2
这个作者很懒,什么都没留下…
展开
-
一步步带你看看webpack的HMR实现原理
可以看出返回的文件是一个webpackHotUpdate函数,该函数是全局的。所以要在window上挂载该函数。根据hash值获取要更新的json文件该文件中包含了下一个文件更新的hash值和更新范围。通过监听done钩子事件,获取stats,stats中包括当前的hash值。通过拦截客户端的请求从内存中获取相对应的资源。用动态script的方式将要更新的文件拉取。首先监听服务端的发送hash事件。原创 2023-02-21 21:05:07 · 148 阅读 · 0 评论 -
带你从源码看看webpack(v5.74.0)的构建流程(下)?
在学习这一节要了解一些词的意思:moduleGraph:记录了模块和模块之间的关系,比如谁依赖谁、导出什么内容、前置执行顺序、后置执行顺序等等。chunkGraph:记录了哪些chunk里有哪些module,以及哪些module被哪些chunk引用了entrypoint:记录了入口点相关信息,包括来自哪个模块,options等。原创 2022-09-30 18:00:52 · 659 阅读 · 0 评论 -
关于webpack(v5.74.0)的tree-shaking原理
解析模块依赖的过程发生在_doBuild的回调中,主要执行parse方法去解析当前模块的依赖和导出:这里会分析当前模块的依赖,只引入未使用的是不会被记录到dependency列表中的。打标记的意思是标记当前模块对应的ModuleGraphModule的exports信息。如果该变量在当前模块中被用到,那么就会设置_usedInRuntime的值。在生成代码的过程根据变量的_usedInRuntime值解析依赖的时候将变量添加到initFragments。并将initFragments中的片段转换成标记的原创 2022-12-07 11:00:14 · 355 阅读 · 0 评论 -
带你一步步分析webpack是如何执行打包产物的
f.j方法主要是将设置一个promise,并将resolve,reject和本身放入installedChunkData,promises一开始是空列表,然后放入promise。如果该模块id在installedChunks里面(执行过__webpack_require__.f.j方法就会在该数组里面,相当于import),此时就会执行第一个函数,该函数就是promise的resolve。然后还有最后一个onload回调,由于script是宏任务,所以会执行完所有的微任务,再执行onload回调。原创 2022-10-02 20:57:31 · 1225 阅读 · 0 评论 -
带你看看webpack中的异步任务调度
异步调度任务原创 2022-09-23 16:50:37 · 237 阅读 · 0 评论 -
webpack打包原理解析
目录结构如下图所示a.jsconst printB = require('./b')module.exports = function printA() { console.log('module a!') printB()}b.jsmodule.exports = function printB() { console.log('module b!') }index.jsconst printA = require('./a')printA()webpac原创 2021-07-03 14:57:11 · 133 阅读 · 0 评论 -
带你从源码看看webpack(v5.74.0)的构建流程(上)?
webpack构建流程原创 2022-09-30 09:24:57 · 740 阅读 · 0 评论 -
关于css-loader(v6.7.2)源码解析
css-loader主要调用postcss插件实现所需要的功能。原创 2022-12-01 14:49:13 · 392 阅读 · 0 评论 -
关于postcss-loader(v7.0.2)的源码解析
postcss-loader主要使用postcss的插件处理传进来的css内容,然后转换成ast。原创 2022-12-01 14:17:50 · 499 阅读 · 0 评论 -
关于webpack(v5.74.0)的source-map原理
source-map我相信大家平时接触的也比较多,但是它的具体实现原理可能比较模糊。接下来我带大家一步步解析source-map原理。原创 2022-11-29 11:10:57 · 192 阅读 · 0 评论 -
关于webpack(v5.74.0)的钩子在插件中的应用
在 webpack 选项中的 entry 被处理过之后调用。一般用来获取入口。原创 2022-11-26 21:26:24 · 1185 阅读 · 0 评论 -
关于webpack(v5.74.0)的html-webpack-plugin原理
html-webpack-plugin插件可以将现有的资源添加进html文件,同时也可以监听该插件的一些hooks进行自定义操作,接下来我们看看具体实现原理。原创 2022-11-22 11:04:43 · 901 阅读 · 0 评论 -
关于webpack(v5.74.0)的模块联邦原理
首先新增入口,并给该chunk添加依赖ContainerEntryDependency(remoteEntry.js),remoteEntry模块build过程中添加一个异步模块math.js。通过监听依赖解析,当解析时会返回执行RemoteModule模块的build方法添加依赖,在code生成时设置initExternal方法。在解析依赖的时候会触发ExternalsPlugin插件的回调方法。主要返回ExternalModule模块内容(获取需要的远端模块内容)。原创 2022-11-21 15:12:00 · 1127 阅读 · 0 评论 -
关于webpack(v5.74.0)的dllPlugin插件的原理
我们来理清楚一下逻辑,上面的代码可能有点乱。DllPlugin主要通过DllEntryPlugin监听compiler.hooks.compilation去添加当前依赖DllEntryDependency对应的模块工厂dllModuleFactory,随后通过监听compiler.hooks.make(compilation 结束之前执行)添加入口依赖DllEntryDependency。并遍历entries给当前入口添加依赖EntryDependency(jquery,lodash)。原创 2022-11-08 17:06:35 · 1035 阅读 · 0 评论