浅谈webpack打包原理

浅谈webpack打包原理

模块化机制

webpack并不强制你使用某种模块化方案,而是通过兼容所有模块化方案让你无痛接入项目。有了webpack,你可以随意选择你喜欢的模块化方案,至于怎么处理模块之间的依赖关系及如何按需打包,webpack会帮你处理好的。

关于模块化的一些内容,可以看看我之前的文章:js的模块化进程

核心思想:

  1. 一切皆模块: 
    正如js文件可以是一个“模块(module)”一样,其他的(如css、image或html)文件也可视作模 块。因此,你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物(业务)分割成更小的易于管理的片段,从而达到重复利用等的目的。
  2. 按需加载: 
    传统的模块打包工具(module bundlers)最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边,“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件,而且异步加载部分代码以实现按需加载。

文件管理

  • 每个文件都是一个资源,可以用require/import导入js
  • 每个入口文件会把自己所依赖(即require)的资源全部打包在一起,一个资源多次引用的话,只会打包一份
  • 对于多个入口的情况,其实就是分别独立的执行单个入口情况,每个入口文件不相干(可用CommonsChunkPlugin优化)

打包原理

把所有依赖打包成一个bundle.js文件,通过代码分割成单元片段并按需加载。

如图,entry.js是入口文件,调用了util1.js和util2.js,而util1.js又调用了util2.js。

打包后的bundle.js例子

/******/ ([
/* 0 */     //模块id
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1);     //require资源文件id
    __webpack_require__(2);

/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
    //util1.js文件
    __webpack_require__(2);
    var util1=1;
    exports.util1=util1;

/***/ },
/* 2 */
/***/ function(module, exports) {
    //util2.js文件
    var util2=1;
    exports.util2=util2;

/***/ }
...
...
/******/ ]);
  1. bundle.js是以模块 id 为记号,通过函数把各个文件依赖封装达到分割效果,如上代码 id 为 0 表示 entry 模块需要的依赖, 1 表示 util1模块需要的依赖
  2. require资源文件 id 表示该文件需要加载的各个模块,如上代码_webpack_require__(1) 表示 util1.js 模块,__webpack_require__(2) 表示 util2.js 模块
  3. exports.util1=util1 模块化的体现,输出该模块
时间: 2024-10-08 11:06:22

浅谈webpack打包原理的相关文章

[转] 浅谈 ArrayList 内部原理

转自:浅谈 ArrayList 内部原理 System.Collections.ArrayList 就是我们常说的动态数组,也是我们常用的 "数据类型" 之一.在 MSDN 上是这样表述的:使用大小可按需动态增加的数组实现 IList 接口.我来解释一下,就是:一个可以根据需要动态增加使用大小并可按照索引单独访问的对象的非泛型集合.一般人都认为 ArrayList 就是一个 "纯动态" 的数组,与 <数据结构> 中 "链表" 的原理一

&nbsp; &nbsp; &nbsp;【原创】浅谈安全狗原理,不启动安全狗使用防火墙 &nbsp;

最近两天在服务器装了安全狗,由于服务器并没有注册系统服务,所以安全狗一直不起作用 后来注册了apache2a. 把安全狗装好了,然后测试了一***入 说明成功了.但是重启之后apache服务又没了,于是我就纠结,看了一下apache的配置文件: 发现 底部多了如下三行代码: #Begin SafeDogSite-ApacheFilter edits - remove only on uninstall Include "f:/jspstudy/apache/conf/SafeDogSiteApa

浅谈html运行原理

浅谈HTML运行原理,所谓的HTML简单的来说就是一个网页,虽然第一节就讲html原理可能大家会听不懂,就当是给一个初步印象把,至少大概知道一个网页的运行流程是怎样的,下面上一张图: 大致的一个html的运行原理就是如图所示,浏览器发送一个http请求,然后首先会解析域名(主机名),然后在本地的"c:\windows\system32\drivers\etc\hosts"文件下查找域名(主机名)所对应的IP地址,如本地找不到就连接到万维网(外网)上查找所对应的IP地址,当查找到对应的I

webpack打包原理

Webpack 一个模块打包器,将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. 本身只能打包js模块,自带BGM如虎添翼(Loader转换器)[将各种类型的资源转换成js模块] 安装 $ npm intsall webpack -g 在项目文件中安装webpack依赖 #进入安装目录 #确定已经有package.json,没有的话就通过npm init 创建 #安装webpack依赖 $npm install webpack --save-dev 查看版本信息

浅谈Webpack(一)

webpack官方文档 什么是webpack? Webpack 是一个前端资源加载/打包工具(Module Bundler),它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 只需要相对简单的配置就可以提供前端工程化需要的各种功能,并且如果有需要它还可以被整合到其他比如 Grunt / Gulp 的工作流. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在

浅谈webpack优化

webpack优化方案 1. 优化开发体验 1-1. 加快构建速度 ① 缩小文件搜索范围 由于 Loader 对文件的转换操作很耗时,需要让尽可能少的文件被 Loader 处理,用include和exclude去缩小: resolve.modules用于配置 Webpack 去哪些目录下寻找第三方模块:[path.resolve(__dirname, 'node_modules')](根目录下): resolve.mainFields用于配置第三方模块使用哪个入口文件:['mian']: res

浅谈NAT的原理、缺陷及其解决之道

为什么会有NAT 犹如windows统治着绝大部份桌面系统一样,TCP/IP也是网络协议中的实际统治者,而IP正是这个协议统治的基础,作为标识TCP/IP网络中每个结点的IP地址,由于它只有32个bit的空间,随着网络的发展,它变得越来越稀有,再加上IP地址地区分配的极端不平衡,已使一些地区比如亚洲部分国家的IP资源很快就会用完,在IPv6还没有普及开来之时,为了解决IP地址的燃眉之急,我们需要一种手段来尽量减少对公网IP的使用,这种手段就是NAT(Network Address Transla

[iOS]浅谈NSRunloop工作原理和相关应用

一. 认识NSRunloop  1.1 NSRunloop与程序运行 那么具体什么是NSRunLoop呢?其实NSRunLoop的本质是一个消息机制的处理模式.让我们首先来看一下程序的入口——main.m文件,一个ios程序启动后,只有短短的十行代码居然能保持整个应用程序一直运行而没有退出,是不是有点意思?程序之所以没有直接退出是因为UIApplicationMain这个函数内部默认启动了一个跟主线程相关的NSRunloop对象,而UIApplicationMain这个函数一直执行没有返回就保存

浅谈P2P终结者原理及其突破

P2P终结者按正常来说是个很好的网管软件,但是好多人却拿它来,恶意的限制他人的流量,使他人不能正常上网,下面我们就他的功能以及原理还有突破方法做个详细的介绍! 我们先来看看来自在网上PSP的资料:P2P终结者是由Net.Soft工作室开发的一套专门用来控制企业网络P2P下载流量的网络管理软件.软件针对 目前P2P软件过多占用带宽的问题,提供了一个非常简单的解决方案.软件基于底层协议分析处理实现,具有很好的透明性.软件可以适应绝大多数网络环境,包 括代理服务器.ADSL路由器共享上网,Lan专线等