快速Webpack学习记之《__webpack_require__》

12,301 阅读2分钟

Webpack学习记之《webpack_require

准备

为了看到Webpack是怎么把模块进行加载和打包,这里创建了两个文件,分别是a.jsindex.jsindex.js调用了a.jsfuncA

/* src/a.js */
export function funcA() {
  console.log('in funcA');
}

/* src/index.js */
import { funcA } from './a';

export function funcB() {
  funcA();
  console.log('in funcB');
}

webpack处理结果分析

以下webpack打包出来的文件(我做了一些删减和eval的转换)。 接下来我们一步一步看看模块是怎么加载的。

var WebpackTest =
(function(modules) { // webpackBootstrap
	// The module cache
	var installedModules = {};
	// The require function
	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;
	}
	// define getter function for harmony exports
	__webpack_require__.d = function(exports, name, getter) {
		if(!__webpack_require__.o(exports, name)) {
			Object.defineProperty(exports, name, { enumerable: true, get: getter });
		}
	};
	// define __esModule on exports
	__webpack_require__.r = function(exports) {
		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
		}
		Object.defineProperty(exports, '__esModule', { value: true });
	};
	// Object.prototype.hasOwnProperty.call
	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };

	// Load entry module and return exports
	return __webpack_require__(__webpack_require__.s = "./src/index.js");
})
/************************************************************************/
({

 "./src/a.js":
  (function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, "funcA", function() { return funcA; });
    function funcA() {  console.log('in funcA');}
  }),

  "./src/index.js":
  (function(module, __webpack_exports__, __webpack_require__) {
    __webpack_require__.r(__webpack_exports__);
    __webpack_require__.d(__webpack_exports__, "funcB", function() { return funcB; });
    var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");
    function funcB() {
      Object(_a__WEBPACK_IMPORTED_MODULE_0__["funcA"])();
      console.log('in funcB');
    }
  })
});

step 1

我们看到整个立即执行函数的真正执行的地方。 ./src/index.js就是在webpack.config.js中定义的entry。

 return __webpack_require__(__webpack_require__.s = "./src/index.js");

step 2

接下来轮到我们的主角__webpack_require__

var installedModules = {};
// The require function
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;
}

__webpack_require__函数可以类比CommonJS的require,都是加载模块代码。和NodeJS的设计很类似,都是先从缓存取用,否则加载模块并放入缓存。

__webpack_require__所在的闭包能访问外层变量modules和缓存installedModules。这个很关键,因为modules是webpack打包后立即执行函数传入的参数。modules是一个object,key是string类型,value是function类型。

step3

我们开始加载模块moduleId('./src/index.js'),执行模块方法

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

这里我们看到了两个函数,分别是__webpack_require__.r__webpack_require__.d

__webpack_require__.r方法主要是标识该模块为es模块。

__webpack_require__.d方法是提供Getter给导出的方法、变量。

"./src/index.js":
  (function(module, __webpack_exports__, __webpack_require__) {
    // 标识模块为es模块
    __webpack_require__.r(__webpack_exports__);
    // 提供funcB的getter
    __webpack_require__.d(__webpack_exports__, "funcB", function() { return funcB; });
    // 加载module a
    var _a__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/a.js");
    function funcB() {
      //调用module a的funcA方法
      Object(_a__WEBPACK_IMPORTED_MODULE_0__["funcA"])();
      console.log('in funcB');
    }
  })

我们对比看看未经webpack处理的代码,就能明白上面的webpack处理后的代码啦。

/* 以下是源代码,未经webpack处理 */
/* src/index.js */
import { funcA } from './a';

export function funcB() {
  funcA();
  console.log('in funcB');
}

step 4

想在浏览器中使用funcB,只需要调用WebpackTest.funcB()即可。 下面为对应的webpack配置

//webpack.config.js
output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'WebpackTest',
    libraryTarget: 'var',
}

结尾

webpack是前端日常使用的工具,也是有必要了解webpack打包处理出来的文件。