分析Webpack中的

日期:2020-02-28编辑作者:公司产品

  其实是一个非常实用的 api。mes 模块但是 3-4 年过去了,却依旧还有很多人不知道如何使用。

  而这个 api 主要为我们做什么样的事情?它可以帮助我们动态加载我们想要的文件,非常灵活和强大(可递归目录)。可以做 import 做不到的事情。今天就带大家一起来分析一下,webpack 的require.context是如何实现的。mes 模块

  在分析这个 api 之前呢,我们需要先了解一下一个最简单的文件,webpack 会编译成啥样。

  初次一看是很乱的,所以为了梳理结构,我帮大家去除一些跟本文无关紧要的。其实主要结构就是这样而已,代码不多为了之后的理解,一定要仔细看下每一行

  __webpack_require__就是一个模块加载器,而我们所有的模块都会以对象的形式被读取加载

  了解了主体结构之后我们就可以写一段require.context来看看效果。我们先新增 2 个 ts 文件并且修改一下我们的 index.ts,以便于测试我们的动态加载。

  // 说实话这波操作没看懂,目前猜测是 webpack 会编译成 0.js 1.js 这样的文件 如果找不到误加载就出个 error

  我在源码中写了很详细的注释。看完这段代码就不难理解文档中所说的require.context会返回一个带有 3 个API的函数(webpackContext)了。

  很简单,可以发现编译为了__webpack_require__加载器并且加载了 id 为./src/demos sync recursive .ts的模块,sync表明我们是同步加载这些模块(之后我们在介绍这个参数),recursive表示需要递归目录查找。自此,我们就完全能明白 webpack 是如何构建所有模块并且动态加载的了。

  我们知道 webpack 在 2.6 版本后,在加载模块时,可以指定webpackMode模块加载模式,我们能使用几种方式来控制我们要加载的模块。常用的 mode一般为synclazylazy-onceeager

  lazy-once 延迟加载会分离出单独的 chunk 文件,加载过下次再加载直接读取内存里的代码。

  eager 不会分离出单独的 chunk 文件,但是会返回 promise,只有调用了 promise 才会执行代码,可以理解为先加载了代码,但是我们可以控制延迟执行这部分代码。

  这部分文档很隐晦,也可能是文档组没有跟上,所以如果我们去看 webpack 的源码的话,可以发现线 种 mode。

  那 webpack 到底是如何做到可递归获取我们的文件呢?在刚刚上面的源码地址里我们能发现这样一行代码。

  这就是text 是如何加载到我们文件的具体逻辑了。其实就是fs.readdir而已。最后获取到文件之后在通过 context 加载器来生成我们的模块结构对象。mes 模块比如这样的代码就是负责生成我们sync类型的context加载器。大家可以具体在看别的5种类型。

  1.学习了解 webpack 是如何组织加载一个模块的,webpack 的加载器如何运作,最后如何生成编译后的代码。

  2.本来仅仅只是想了解如何实现的,却发现了它第三个参数有 6 种mode,这部分却也是 webpack 文档上没有的。

  3.从一个实用的 API 出发,探索了该 api 的实现原理,并且一起阅读了部分 webpack 源码。

  4.学会一个小小的 API 使用很简单,但是如果你去探寻本质,可以发现许多边边角角有意思的东西。探索本质远比你成为 API 的搬运工更重要。

  最后留个作业,大家可以按照这样的思路再去学习另外 6 种 mode 编译后的代码。

  文章里编译后的代码,都在这里 返回搜狐,查看更多

本文由昆明市波箱控制模块有限公司发布于公司产品,转载请注明出处:分析Webpack中的

关键词: mes 模块

电脑中自带的PPT在哪

可选中1个或多个下面的关键词,搜索相关资料。也可直接点搜索资料搜索整个问题。 二、查看所有程序内是否有Mi...

详细>>

基于GPRS网络的GPS图形导航仪(下)

导航系统中,mes 模块全套软件系统由用户软件、导航仪底层驱动软件和服务器端控制软件组成。这里,以导航仪底层...

详细>>

英特尔在NRF2020年首次推出沉浸式零售技术和区域

在美国零售联合会(National Retail Federation) 2020年的大型展会上,展示的许多尖端技术都是为了帮助零售商更好地服务客...

详细>>

求Java Web典型模块与项目实战大全(源码) 求这

可选中1个或多个下面的关键词,搜索相关资料。也可直接点搜索资料搜索整个问题。mes 模块 可以啊,通过115网盘发...

详细>>