webpack打包原理

最新推荐文章于 2022-11-27 23:49:40 发布
最新推荐文章于 2022-11-27 23:49:40 发布
阅读量160 收藏
点赞数
分类专栏： javascript 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qingsemengshou/article/details/119865407
版权

webpack构建的bundle.js里有两个比较重要的东西，

一个是__webpack_modules__对象，对象的key就是页面路径，值就是页面中的代码，每个module对应当前文件

一个是__webpack_require__方法，用于执行module的，执行后会在内部创建一个module对象，并将module.exports初始化为空对象，然后执行module代码,如果module里有对module.exports赋值，则会将之前初始化的空对象覆盖

还有一个是__webpack_module_cache__，用于缓存module的对象，key是页面路径

首先从entry对应的入口页开始

1.如果碰到import，就需要执行一个__webpack_require__方法，并把路径传过去，

2.这个时候如果当前module有被缓存过，就直接返回module.exports的值，如果当前module没有被缓存过，就执行根据路径从__webpack_modules__对象里拿到当前module的代码然后执行，

3如果当前module的代码里有import,  就继续递归执行__webpack_require__，

4最后返回更新后的module.exports的值

其实就是个深度优先算法，递归的对模块执行__webpack_require__方法，并返回module.exports的值让父级函数使用，并且添加了缓存功能，复用之前执行过的模块儿

loader

打包后的文件里面没有loader，说明loader是在解析文件时用的，webpack会将文件读取为字符串形式，然后执行提供的loader方法，loader实际上是一个帮助webpack解析文件的方法，参数是文件里面的内容，类型是字符串，可以对字符串进行一定的处理，然后返回

山顶哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack原理 如何打包，看懂这篇文章就够了，面试必备技能
郊眠寺
06-30 893
作为一个前端“攻城狮”，Webpack 再熟悉不过了，Webpack 能做的事太多了，可以将所有资源（包括 JS，TS，JSX，图像，字体和 CSS 等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。Webpack 很出色的完成了转译前端多种文件资源，分析复杂模块依赖的工作，并且我们还可以自定义 loader，自由的加载我们自己的资源，那 Webpack 是如何实现打包的呢？今天来我们一起来看下。1、什么是 require？说到 require 首先想到的可能就是 import，import 是
二、webpack打包原理
qq_41797053的博客
12-04 269
webpack之打包原理分析 本篇主要讲解webpack打包过程中原理，详细分析打包过程发生了什么事儿，是怎样实现打包的。 webpack的编译过程 根据入口文件（默认是src目录下的index.js文件）读取项目所需的依赖文件，然后创建一个chunk 根据入口文件创建的chunk至少有两个属性，一个是name,一个是ID。 chunk的主要功能是------>根据文件配置、模块内容等生成资源文件 第一步：根据入口文件读取模块文件， 第二步：检查是否读取过该模块文件，没有就继续下一步， 第三步
webpack 打包（plugin、loader 工作原理）
雪急飞绪博客
05-07 1362
模块化工具 由来 ES Modules 存在环境兼容问题 模块文件过多，网络请求频繁 所有的前端资源都需要模块化 概要 Webpack 作为 模块打包器（Module bundler），可以把零散的文件打包到一个 JS 中，对于有环境兼容的代码可以在打包过程中通过 模块加载器（Loader） 对其进行编译转换 Webpack 还具备 代码拆分（Code Splitting） 能力，将应用中所有代码按照我们的需要进行打包，这样就可以渐进式加载，不会导致文件过碎或过大 Webpack 支持以模块化
Webpack的打包原理
kang_k的博客
09-15 568
Webpack的运行是个串行的过程，从启动到结束会依次执行：初始化参数、开始编译、确定入口、编译模块、完成模板编译、输出资源、输出完成；
如何使用 Webpack 实现模块化打包？
kjssjj12的博客
07-05 603
目前，前端领域有一些工具能够很好的满足以上这 3 个需求，其中最为主流的就是 Webpack、Parcel 和 Rollup，我们以 Webpack 为例： Webpack 作为一个模块打包工具，本身就可以解决模块化代码打包的问题，将零散的 JavaScript 代码打包到一个 JS 文件中。 对于有环境兼容问题的代码，Webpack 可以在打包过程中通过 Loader 机制对其实现编译转换，然后再进行打包。 对于不同类型的前端模块类型，Webpack 支持在 JavaScript 中以模块化的方式载入任意
webpack打包原理解析
木头房子的格子铺
04-29 3643
文章目录webpack打包是如何运行的webpack对CommonJS的模块化处理webpack对es6 Module模块化的处理webpack文件的按需加载按需加载输出代码分析总结 webpack打包是如何运行的 也可以称为，webpack是如何实现模块化的 CommonJS是同步加载模块，一般用于node。因为node应用程序运行在服务器上，程序通过文件系统可以直接读取到各个模块的文件，特点...
webpack打包教程.zip_webpack打包原理vue
12-24
Webpack 是一个强大的模块打包工具，尤其在前端开发中被广泛使用。它的工作原理是将JavaScript、CSS、图片等资源视为“模块”，...通过深入学习和实践，你可以掌握Webpack的打包原理，从而提升项目构建的效率和质量。
深入webpack打包原理及loader和plugin的实现
11-21
本文讨论的核心内容如下： webpack 进行打包的基本原理...1. webpack打包基本原理 webpack的一个核心功能就是把我们写的模块化的代码，打包之后，生成可以在浏览器中运行的代码，我们这里也是从简单开始，一步步探索we
webpack打包构建流程
03-13
webpack 打包构建流程 在了解 webpack 打包构建流程之前，我们需要了解一些基本概念。...在了解了 webpack 的打包构建流程后，我们可以更好地理解 webpack 的工作原理，并更好地使用 webpack 来构建我们的项目。
Webpack打包慢问题的完美解决方法
08-31
为了解决这个问题，我们需要了解 Webpack 的工作原理和配置方法。 Webpack 打包慢的原因 -------------------- Webpack 打包慢的原因主要是因为它需要处理大量的模块，这些模块可能包括第三方库和业务代码。在打包...
CommonJS，ES6 Module以及webpack模块打包原理
weixin_43443341的博客
10-27 1638
前端模块化标准 CommonJS 和 ES6 Module，以及webpack模块打包的原理
webpack打包原理 ? 看完这篇你就懂了 !
liubangbo的专栏
09-13 358
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。
干货分享前端开发的必备技能--webpack打包
weixin_71171795的博客
11-27 2068
打包在我们开发的过程中是一个将复杂的代码使用node环境下的webpack工具包压缩为一个代码文件,大大减少了代码的空间占用,提高浏览器解析的速率使用方法
Webpack--模块打包
xuan的博客
04-27 2513
一、CommonJS （1）CommonJS是由Javascript社区于2009年提出的包含模块、文件、IO、控制台在内的一系列标准。 （2）在Node.js的实现中采用了CommonJS标准的一部分，并在其基础上进行了一些调整。我们所说的CommonJS模块和Node.js中的实现并不完全一致，现在一般提到CommonJS其实是Node.js中的版本，而非它的原始定义。 （3）CommonJS中规定每个文件是一个模块。 导出 （1）导出是一个模块向外暴露自身的唯一方式。在CommonJS
深度解锁Webpack（进阶篇）
油墨香^-^的博客
09-06 1503
很多时候，我们在开发环境中会使用预发环境或者是本地的域名，生产环境中使用线上域名，我们可以在webpack定义环境变量，然后在代码中使用。使用webpack内置插件来定义环境变量。中的每个键，是一个标识符.如果value是一个字符串，会被当做code片段如果value不是一个字符串，会被stringify如果value是一个对象，正常对象定义即可如果key中有typeof，它只针对typeof调用定义DEV: JSON.stringify('dev'), //字符串。
工程化之webpack打包过程
weixin_52884694的博客
06-28 532
❝ 人之所以不快乐，主要是缘于过去和未来：「为过去耿耿于怀」，「为未来惴惴不安」 ❞ 大家好，我是「柒八九」。 在前期，我们开了一个关于「前端工程化」的系列文章。已经从 概念介绍 何为脚手架SourceMap 的常规概念在Webpack 中针对SourceMap的配置 构建工具 构建解决的问题包管理工具模块化常见方式 等角度进行了一些常规概念的介绍和梳理。而今天，我们选择了一个在前端范围内，占很大比重的构建工具--Webpack。 「近一年的npm下载量」 「github对应的stars」 可以
webpack modules模块
cjexe的博客
07-24 749
在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。 每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。 Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在...
Webpack原理整理（一）模块化原理
peifeng_chen的微博
04-09 1631
演示项目样例介绍 这次来介绍下webpack模块化的原理，这次以commonJS模块化为例，先来看看项目的目录结构是怎样的。 我们再来看看主要的内容，项目的内容非常简单，在index.js中用commonJS模块引入的方法，引入了一个js文件夹下common.js导出的 mul 乘法函数。 进行打包，查看模块化原理 我们进行npm run build打包（package.json）script中的build字段要改为web...
webpack 的打包原理e
最新发布
07-28
- *1* *2* *3* [webpack打包原理阮一峰(webpack打包原理优化)](https://blog.csdn.net/yetaodiao/article/details/127367993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值