webpack打包的基础原理-打包后的文件解读
1、概念
本质上,webpack 基于node平台,利用 node 的各种api来实现 javascript 应用程序的一个静态模块的打包工具。
在打包过程中,构建依赖关系,并且实现模块引用预处理,以及缓存等。
2、分析
1、人口文件
// mian.js
const a = require('./m1')
const b= require('./m2')
import { test } from './m1'
console.log(test)
//m2.js
export default {
b:2
}
//m1.js
export const test = {test:1}
export default {
a:1
}
2、生产的文件
(function (modules) {
var installedModules = {}; //缓存
/*
* 加载模块函数
* 传入模块id
* */
function __webpack_require__(moduleId) {
// 检查缓存中是否有模块
if (installedModules[moduleId]) {
return installedModules[moduleId].exports;
}
// 创建一个新模块,并缓存起来
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};
// 调模块的函数,modules
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
module.l = true;
// 返回对应模块
return module.exports;
}
__webpack_require__.m = modules;
__webpack_require__.c = installedModules;
__webpack_require__.d = function (exports, name, getter) {
if (!__webpack_require__.o(exports, name)) {
Object.defineProperty(exports, name, {
configurable: false,
enumerable: true,
get: getter
});
}
};
__webpack_require__.n = function (module) {
var getter = module && module.__esModule ?
function getDefault() {
return module['default'];
} :
function getModuleExports() {
return module;
};
__webpack_require__.d(getter, 'a', getter);
return getter;
};
__webpack_require__.o = function (object, property) {
return Object.prototype.hasOwnProperty.call(object, property);
};
__webpack_require__.p = ""; // 加载入口文件
return __webpack_require__(__webpack_require__.s = 0);
})
([
(function (module, exports, __webpack_require__) {
const a = __webpack_require__(1)
const b = __webpack_require__(2)
}),
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {value: true});
__webpack_exports__["default"] = ({
a: 1
});
}),
(function (module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", {value: true});
__webpack_exports__["default"] = ({
b: 2
});
})
]);
观察以上代码得到结果:
1、打包后的代码是一个立即执行函数,且传入的参数为一个数组
2、参数数组就是我们引用的模块
3、每一个模块对应着数组的位置就是那么的id
4、在立即函数中加载入口文件,并执行
__webpack_require__ : 加载并执行某一个模块并将模块缓存在 installedModules 中。
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
这里是执行引用的某一个模块。
并将module,exports,require 加入模块中。
这也是为什么我们在模块中有全局变量 module/exports/require
通过对打包后的文件分析,基本可以完全理解打包过程。
webpack打包的基础原理-打包后的文件解读的更多相关文章
- webpack打包后的文件
用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...
- 为何webpack打包后的文件要放在服务器上才能运行
为何会有此问: 在刚开始使用vue-cli时还不知道打包后的文件要在服务中才能运行,直接点开后发现页面白板,请教大神后得知要起一个服务才能运行起来,当时我脑子中的逻辑是这样的: 因为:js代码是由浏览 ...
- 配置webpack中externals来减少打包后vendor.js的体积
在日常的项目开发中,我们会用到各种第三方库来提高效率,但随之带来的问题就是打包后的vendor.js体积过大,导致加载时空白页时间过长,给用户的体验太差.为此我们需要减少vendor.js的体积,从本 ...
- webpack(3)基础的打包过程
没有配置文件的打包 如果我们没有使用配置文件webpack.config.js,那么我们就需要通过命令来打包 案例 我们首先创建一个webpackTest文件夹,然后在文件夹中再创建2个子文件夹dis ...
- Vue(基础七)_webpack(webpack异步加载原理)
---恢复内容开始--- 一.前言 1.webpack异步加载原理’ 2.webpack.ensure原理 ...
- Webpack 入门(一):安装 / 打包 / 命令行
一:安装webpack和基本环境搭建 新建一个工作的文件夹(我取的名字叫Webpack) 打开命令行,cd进入该文件夹 //初始化一下npm > E:\work\Webpack>npm i ...
- webpack图片的路径与打包
转的http://www.cnblogs.com/ghost-xyx/p/5812902.html 今天写 react遇到打包图片,之前都是通过url在css里,没遇到问题,今天在 react里直接用 ...
- 使用可视化图表对 Webpack 2 的编译与打包进行统计分析
此文主要对使用可视化图表对 Webpack 2 的编译与打包进行统计分析进行了详细地讲解,供您更加直观地参考. 在之前更新的共十七章节中,我们陆续讲解了 Webpack 2 从配置到打包.压缩优化到调 ...
- 走近webpack(2)--css打包及压缩js
前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...
随机推荐
- E - Easy Dijkstra Problem(求最短路)
Description Determine the shortest path between the specified vertices in the graph given in the inp ...
- C#基础 结构体 枚举类型
结构体:就是一个自定义的集合,里面可以放各种类型的元素,用法大体跟集合一样. 一.定义的例子: struct student { public int nianling; public int fen ...
- 专题九:实现类似QQ的即时通信程序
引言: 前面专题中介绍了UDP.TCP和P2P编程,并且通过一些小的示例来让大家更好的理解它们的工作原理以及怎样.Net类库去实现它们的.为了让大家更好的理解我们平常中常见的软件QQ的工作原理,所以在 ...
- Java编程思想读书笔记_第6章
如何创建一个包: 比如创建一个包名为com.huawei 则在一个目录下如(d:\java)创建目录com/huawei 然后在huawei目录下创建一个文件Assist.java package c ...
- SQL SERVER 2008 在某表中新增一列时失败
背景:新增列语句如:“alter table 表名 add 列名 float default 0 with values”(用VS2010做网站,这句话是在C#代码里执行的) 报错提示: 警告: 已经 ...
- swift Enumerations
swift Enumerations enum.case.switch CaseIterable allCases 要区别枚举变量和关联值 枚举变量参与枚举运算: 关联值和rawvalue不参与. A ...
- 梦想CAD控件COM接口光栅图处理
在CAD操作过程中,我们在设计绘图时,光栅图像也就是我们常说的图片,应用非常广泛,在CAD中可以直接插入光栅图像,并且可以对光栅图像进行裁剪.透明度调整等一些操作,在网页可以快速实现我们所需功能. 一 ...
- nginx_rewrite规则介绍
rewrite功能就是,使用nginx提供的全局变量或自己设置的变量,结合正则表达式和标志位实现url重写以及重定向.rewrite只能放在server{},location{},if{}中,并且只能 ...
- 计算机网络(四)--全世界最好的TCP基础知识讲解
TCP传输的数据单元是报文段,报文段分为首部.数据两部分 TCP首部 首部的前20字节是固定长度,后面的4n字节根据需要增加的选项 字段解释:图中标示单位为bit,不是byte 1.源端口.目的端口: ...
- post请求重定向到get请求问题
springMVC默认重定向是get请求,我在方法注解中没有指定method是post还是get请求,这样就可以接收到post重定向来的请求,也可以接收到页面传来的get请求,如果要传参,可以使用mo ...