浅谈Webpack 是如何加载模块的

最新推荐文章于 2024-05-14 13:00:25 发布
最新推荐文章于 2024-05-14 13:00:25 发布
阅读量1.4k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42485348/article/details/80759603
版权

Webpack 在前端开发中作为模块打包工具非常受开发者的青睐，丰富的 loader 使它可以实现各种各样的功能。本文将通过 webpack 来打包一个 js 文件，看看 webpack 是如何加载各个模块的。

两个简单的源文件

为了方便分析 webpack 加载模块的原理，我们准备了两个文件：

hello.js


1
2
3
4
5
6
7
const hello = {
say: arg => {
console.info( 'hello ' + arg || 'world' );
}
};
export default hello;

index.js


1
2
3
import Hello from './hello' ;
Hello.say( 'man' );

index.js 作为入口文件，引用了 hello.js 模块。

Webpack 打包

在命令行执行 webpack index.js bundle.js 对入口文件进行打包，生成 bundle.js ，大体结构为（为了方便阅读，我删除了部分多余的代码）：

可以看到，最终生成的文件以 (function (modules) {})([模块1, 模块2]) 的方式启动，我们定义的模块被包装成一个个匿名函数，然后以数组的形式传递个一个匿名函数 function (modules) {}，在这个匿名函数中定义了一个 __webpack_require__() 函数，用来加载模块，最后，通过 return __webpack_require__(__webpack_require__.s = 0); 来加载第一个模块 index.js

__webpack_require__() 函数

该函数接收一个 moduleId 作为参数，这个参数就是各个模块在数组中的索引，


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/
if (installedModules[moduleId]) {
/******/
return installedModules[moduleId].exports;
/******/
}
/******/ // Create a new module (and put it into the cache)
/******/
var module = installedModules[moduleId] = {
/******/
i: moduleId,
/******/
l: false ,
/******/
exports: {}
/******/
};
/******/
/******/ // Execute the module function
/******/
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/
module.l = true ;
/******/
/******/ // Return the exports of the module
/******/
return module.exports;
/******/
}

其中 installedModules 是用来缓存执行过的模块。通过 modules[moduleId].call() 来执行模块，最后返回模块的 exports。

模块接受的参数

以 hello.js 模块为例


1
2
3
4
5
6
7
8
9
10
11
12
13
14
( function (module, __webpack_exports__, __webpack_require__) {
"use strict" ;
const hello = {
say: arg => {
console.info( 'hello ' + arg || 'world' );
}
};
/* harmony default export */
__webpack_exports__[ "a" ] = (hello);
/***/
})

webpack 会向模块传递 module, __webpack_exports__, __webpack_require__ 三个参数，前两个是用来导出模块内的变量，第三个参数为前面介绍的 __webpack_require__() 的引用，用来导入其它模块。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
qq_42485348
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack基本用法
weixin_43165676的博客
12-04 927
webpack基本用法
webpack是如何实现模块化加载的
hello_katty的专栏
11-06 498
webpack支持的模块规范有AMD、CommonJS、ES2015 import等规范。不管何种规范大致可以分为同步加载和异步加载两种情况。本文将介绍webpack是如何实现模块管理和加载。 同步加载如下： import a from './a'; console.log(a); 异步加载如下： import('./a').then(a => console.log(a)...
Webpack打包原理
qq_34893429的博客
06-15 1642
开门见山。1、打包单一模块webpack.config.jsmodule.exports = { entry:"./chunk1.js", output: { path: __dirname + '/dist', filename: '[name].js' }, };chunk1.jsvar chunk1=1; exports.chunk1=c
2024年最全webpack图解指南（模块化部分），面试官经验分享
最新发布
2401_84446513的博客
05-14 974
中的依赖项，然后不断递归去获取模块，最后将通过深度遍历到的模块以数组形式存储。为了能够实现 webpack， 我们可以通过反推的方法，先看webpack 打包后 bundle 是如何工作的。由于模块的遍历并不是只有单纯的一层结构，一般为树形结构，因此在这里我采用了深度遍历。首先来介绍一下模块的结构，能使我们快速有所了解, 结构比较简单，由内容和模块id组成。这一步比较简单，只要按照我们分析的流程图提供已注册模块变量、模块列表变量、导入函数。模块查找（从原来的树形的模块依赖，变成了扁平查找）
webpack 模块加载原理
weixin_51175605的博客
08-03 1331
webpack 是一个模块打包器，在它看来，每一个文件都是一个模块。
Webpack配置全解析（优化篇）
Cool的博客
08-10 3095
在上一篇文章Webpack配置全解析介绍了Webpack中loader和plugins的一些基本用法，当loader和plugins使用较多后项目也会越来越耗时，因此这次我们继续学习如何优化webpack的配置来让我们的项目运行的更快耗时更短。 　　本文将从缩小文件搜索范围、减少打包文件、缓存和多进程四个方面来了解Webpack的优化配置。 缩小文件搜索范围 　　Webpack会从Entry入口出发，解析文件中的导入模块语句，再递归解析；每次遇到导入语法时会做两件事情： 查找导入模块的位置，比如re
Webpack--模块打包
xuan的博客
04-27 2502
一、CommonJS （1）CommonJS是由Javascript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。 （2）在Node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整。我们所说的CommonJS模块和Node.js中的实现并不完全一致，现在一般提到CommonJS其实是Node.js中的版本，而非它的原始定义。 （3）CommonJS中规定每个文件是一个模块。 导出 （1）导出是一个模块向外暴露自身的唯一方式。在CommonJS
探究 webpack 如何实现模块化加载
耐得住寂寞也是一种境界
11-22 707
这次主要讲讲 webpack 打包后的代码，分析他是如何实现模块化（同步）加载模块的，然后下次再讲讲如何按需（异步）加载模块。
浅谈Webpack核心模块tapable解析
12-09
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，是对前端项目实现自动化和优化必不可少的工具，Webpack 的 loader （加载器）和 plugin （插件）是由 Webpack 开发者和社区开发者共同贡献的，而目前又...
浅谈webpack组织模块的原理
08-27
浅谈webpack组织模块的原理 Webpack 作为前端开发中的主流打包工具，已经成为前端开发的必备技能。了解 Webpack 的组织模块原理对于提高前端开发效率和质量非常重要。本文将详细介绍 Webpack 组织模块的原理，包括...
webpack中如何加载静态文件的方法步骤
11-29
前言: 对于非静态的文件，如js，当webpack打包时，会被直接打到模块文件中，如main.js，如果修改了，需要再次编译 而对于静态文件，如jpg，svg等，我们不希望webpack去打包，只需要在build完后，直接放到dist下的某个路径下即可，随时可以修改，并不需要再次编译 首先，看一段很熟悉的webpack配置 { test: [/\.jpg/], loader: require.resolve('url-loader'), options: { limit: 10000, name: 'static/media/[name].[ext]',
浅谈webpack对样式的处理
08-28
在现代前端开发中，Webpack 是一个至关重要的模块打包工具，它能够处理各种类型的资源，包括样式文件。本文将深入探讨 Webpack 对样式的处理，以及如何通过配置和使用特定的 Loader 和 Plugin 来优化样式处理流程。 ...
webpack模块化原理-commonjs/webpack模块化原理-ES module
zzy7075的专栏
02-04 126
我们都知道，webpack作为一个构建工具，解决了前端代码缺少模块化能力的问题。我们写的代码，经过webpack构建和包装之后，能够在浏览器以模块化的方式运行。这些能力，都是因为webpack对我们的代码进行了一层包装，本文就以webpack生成的代码入手，分析webpack是如何实现模块化的。PS: webpack的模块不仅指js，包括css、图片等资源都可以以模块看待，但本文只关注js。
Webpack运行时require能力解析
weixin_34391445的博客
01-16 2993
在Webpack构建好的js文件中，我们可以看到其实现的简版模块加载方式，__webpack_require__是我们很容易猜到功能，约等于import能力，可以加载某模块。 我们的各种模块化加载语法最后都会变成__webpack_require__来加载。 __webpack_require__函数 // The require function function __webpack_r...
学习之webpack基础配置
那一日面朝大海的博客
04-15 1102
一、webpack 简介 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 简单说，webpack可以看做是一个模块打包机，主要作用就是:分析你的项目结构，找到JavaScript模块以及一些浏览器不能直接运行的拓展语言(sass、less、typesc.
模块化开发 webpack
weixin_40300870的博客
11-28 562
esModule CommonJs webpack
Webpack基础篇(-)--入门
Spongebobna的博客
10-19 817
Webpack基础入门
webpack懒加载
08-08
### 回答1： Webpack懒加载是一种优化前端性能的技术，可以减少初始加载文件的大小，从而提高页面加载速度。通常，当页面加载时，所有的JS代码都会被一次性加载并执行。但是，如果我们将某些模块延迟加载，只有在需要时才加载，那么就可以减少初始加载的文件大小。 Webpack提供了一个import()方法，用于动态地加载模块，它会返回一个Promise对象，可以在resolve时获取到模块的导出对象。使用这个方法，我们可以将模块的加载延迟到需要使用的时候再加载，这就是Webpack懒加载的原理。 以下是一个使用Webpack懒加载的示例： ``` import('./module').then(module => { // 使用模块 }); ``` 在上面的示例中，当代码执行到import()时，会异步地加载'module'模块，加载完成后，会执行then()中的回调函数，我们可以在回调函数中使用模块。 注意：使用Webpack懒加载时，需要确保代码可以被正确地拆分成多个文件，否则可能会导致页面加载错误。 ### 回答2： webpack懒加载是一种通过代码分割实现按需加载模块的技术。当使用webpack构建项目时，所有的模块将被打包到一个文件中，然后在浏览器中加载。这意味着无论使用者需要哪些模块，都会一次性加载，这可能会导致初始加载时间过长。 懒加载通过将应用程序拆分为不同的模块，使得每个页面仅加载当前页面所需的模块，而不是加载整个应用程序。当用户访问某个页面时，只有该页面所需要的模块会被加载，其他模块则会等到需要时再进行加载。这样就能减少初始加载时间，提高页面的响应速度。 实现懒加载的方式有多种。一种常见的方式是使用import()函数动态导入模块。import()函数会返回一个Promise对象，当该模块被加载后，Promise会被resolve。可以通过调用then()方法来执行加载完成后的回调函数。 另一种方式是使用React中的Suspense组件来包裹异步加载的组件。Suspense组件可以渲染一个在组件加载完成之前显示的loading界面，等到异步组件加载完成后再进行渲染。 懒加载不仅可以减少初始加载时间，还可以按需加载不同的模块，提高应用的性能和效率。然而，懒加载也有一些注意事项。需要确保按需加载的模块之间的依赖关系正确，并且避免产生额外的网络请求。要注意合理使用懒加载，避免过度拆分导致加载过多的小模块，从而影响性能。 总结来说，webpack懒加载是一种通过代码分割实现按需加载模块的技术，可以提高应用的加载速度和性能。通过合理使用懒加载的方式，可以有效减少初始加载时间，提高用户体验。 ### 回答3： Webpack懒加载是指将某个模块作为一个单独的文件进行加载，而不是和其他模块一起打包到同一个初始模块中。这样可以在需要时才加载该模块，而不是在初始加载时就加载所有模块。 懒加载的主要优势在于减少初始加载时的文件大小和加载时间。当网页打开时，只需要加载初始模块，而其他模块则在实际需要时再进行加载。这样可以提升网页的加载速度和用户体验，特别是对于大型应用程序。 在Webpack中实现懒加载可以通过使用import函数的动态导入语法来实现。例如，在需要懒加载的地方使用类似于import('module')的语法来导入模块。Webpack会将该模块打包为一个单独的文件，并在需要时进行异步加载。 需要注意的是，懒加载需要配合Webpack的代码分离功能来使用。通过配置Webpack的optimization.splitChunks参数，可以将重复引用的模块提取出来，生成共享的模块文件。这样可以避免在懒加载时重复加载已经存在的模块。 除了使用动态导入语法外，Webpack还提供了其他的技术来实现懒加载，如按需加载的require.ensure语法和React.lazy()方法。这些方法都可以实现类似的懒加载效果。 总之，Webpack懒加载是一种优化网页加载性能的重要技术。它通过将复杂的应用程序划分为多个模块文件，在需要时再进行加载，从而减少初始加载时间和文件大小，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值