一、入口文件main.js

// main.js
console.log('webpack');

二、出口文件bundle.js

1、浏览代码

2、本质

// 实际就是一个自执行函数

(function(modules) {
//...
})([function(module,exports){
console.log('webpack');
}])

这个自执行函数接收一个参数,这个参数是一个模块数组,这个数组里存放我们打包的入口模块,以及这个模块的依赖模块,在这里我们没有依赖模块。

三、代码解读

1、定义一个对象

用来缓存加载进来的模块(加载进来和加载完毕是两个概念)。

// The module cache
/******/ var installedModules = {};

2、声明一个函数

用来加载模块。该函数接收一个moduleId为参数,moduleId就是webpack打包时,你在命令行看到的最下面一行打包文件的详细信息的最开头的数字。

function __webpack_require__(moduleId) {
//...
}

下面,进入该函数内部继续分析。

A、检查函数是否被缓存

为了防止重复打包,这里需要检查该函数是否已经被加载了,进而保证每个模块只会被加载一次。

// Check if module is in cache
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;
}

B、创建一个module对象

该对象有3个属性,i是index的缩写,表示moduleid;l是loaded的缩写,表示是否已经被加载;exports是对象,用来加载依赖。

// Create a new module (and put it into the cache)
var module = installedModules[moduleId] = {
i: moduleId,
l: false,
exports: {}
};

C、执行传进来的模块

因为main.js没有任何依赖模块,因此,该模块函数没有第三个参数,__webpack_require__也不会被传进去。

// Execute the module function
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

D、修改l的值,返回module.exports

// Flag the module as loaded
module.l = true; // Return the exports of the module
return module.exports;

3、为函数添加属性方法

A、m(module)的赋值

// expose the modules object (__webpack_modules__)
__webpack_require__.m = modules;

B、c(cache)的赋值

// expose the module cache
__webpack_require__.c = installedModules;

C、d的赋值,更改当前加载进来的模块的属性配置

进入该方法前,判断了一下__webpack_require__上是否有o方法,来确定加载进来的模块是否是入口模块,因为入口模块总是被第一个加载进来,o方法会在d方法后面被定义。

// define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };

D、n的赋值,根据模块加载机制的不同做出不同的响应,module.__esModule为es6模块加载机制。

// getDefaultExport function for compatibility with non-harmony modules
/******/ __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;
/******/ };

E、o的赋值,包装一下Object.prototype.hasOwnProperty。

/******/    // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

F、p的赋值

// __webpack_public_path__
/******/ __webpack_require__.p = "";

4、返回函数

// Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);

四、总结

对于没有依赖模块的模块来说,上面说的几乎没用。毕竟webpack是用来进行模块打包的,只有一个模块,webpack的作用就发挥不了了。

webpack打包之无依赖模块的更多相关文章

  1. webpack打包之有依赖js模块

    一.入口文件main.js var isd = require('./depend.js'); if(isd.isDepend){ console.log('有依赖模块'); } else { con ...

  2. webpack打包之有依赖es2015模块

    一.入口文件main.js import { isDepend } from './depend.js'; import { fn } from './depend2.js'; if(isDepend ...

  3. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  4. 性能优化 - 查看 webpack 打包后所有的依赖关系(webpack 可视化工具)

    查看 webpack 打包后所有组件与组件间的依赖关系,针对多余的包文件过大, 剔除首次影响加载的效率问题进行剔除修改,本次采用的是 ==webpack-bundle-analyzer(可视化视图查看 ...

  5. 基于ES6模块标准通过webpack打包HTM5项目

    本篇主要演示通过webpack打包phaser项目,webpack安装方法在此处就不一一赘述了 经常用phaser来写html5游戏的朋友可能会发现,当游戏场景比较多时,如果都写在一个js文件中那么将 ...

  6. 前端项目模块化的实践2:使用 Webpack 打包基础设施代码

    以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 使用 TypeScript ...

  7. Webpack 打包优化之速度篇

    在前文 Webpack 打包优化之体积篇中,对如何减小 Webpack 打包体积,做了些探讨:当然,那些法子对于打包速度的提升,也是大有裨益.然而,打包速度之于开发体验和及时构建,相当重要:所以有必要 ...

  8. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  9. webpack打包avalon

    webpack打包avalon+oniui+jquery 随着avalon的发展壮大,我根据CSDN的统计数字,中国前端大概有1%的人在使用avalon了. avalon的最大优势是能兼容IE6,并且 ...

随机推荐

  1. ubuntu MySQL配置文件

    查看配置文件: locate my.cnf 查看配置文件路径: /记得要在配置环境变量后执行下列命令 which mysqld /usr/local/mysql/bin/mysqld --verbos ...

  2. 4.8cf自训

    发现cf以前的好题真的很多.. cf 730j 01背包变形 感觉很好的题 /* 先处理出最少需要t个瓶子 dp[i][j][k]前i个取k个,容量为j时的水的体积 滚动数组搞一下 本题的状态转移必须 ...

  3. CF 833B

    互测题T3... 首先有个dp是非常好想的: 设dp[i][j]为前j个数分成i组的最大得分,则易得:dp[i][j]=max{dp[i-1][k-1]+num[k][j]},其中,num[k][j] ...

  4. DOBRI

    问题 : DOBRI 时间限制: 1 Sec  内存限制: 128 MB 题目描述 给出一个包含N个整数的序列A,定义这个序列A的前缀和数组为SUM数组 ,当SUM数组中的第i个元素等于在i前面的三个 ...

  5. Axure-----三级下拉菜单的具体实现过程

    ********三级下拉菜单的动画效果:********** 1.选中三级菜单将其转换为动态面板,命名为treePanel,并隐藏. 2.选中二级菜单添加交互效果:[切换可见性],勾选treePane ...

  6. gitlab的完全卸载

    一:先停止gitlab gitlab-ctl stop 二:卸载gitlab部分(之前我是rpm安装的,这里rpm卸载) rpm  -e  gitlab-ce 三:发现系统进程还有一个gitlab的进 ...

  7. Linux-server-sshd

    Linux-server-sshd 1:安装 OpenSSH 服务需要4 个软件包 openssh-5.3p1-114.el6_7.x86_64:包含OpenSSH 服务器及客户端需要的核心文件 op ...

  8. 使用Bazel构建C/C++项目

    目录 前提 基本概念 速查链接汇总 stage1: 一个package, 一个target stage2: 一个package,多个target stage3: 多package,多target st ...

  9. C#enum使用Attribute求字段名

    用到了一些反射:(自己看吧) public enum UserState { /// <summary> /// 正常 /// </summary> [Remark(" ...

  10. SQLServer锁的基础问题探究

    SqlServer需要在执行操作前对目标资源获取所有权,那么久发生锁定,是一个逻辑概念.为了保证事务的ACID特性设计的一种机制. 在多用户并发操作数据时,为了出现不一致的数据,锁定是必须的机制.使用 ...