webpack模块加载介绍
来源:互联网 发布:3d平面设计软件 编辑:程序博客网 时间:2024/05/27 00:25
根据第一篇webpack简介的简单介绍,简要分析了一下webpack函数模块加载机制。我们先看一下如下代码,也是webpack简介中编译之后的dest.js文件。
/** * webpack启动函数. * * @param {Array} modules *//******/ (function(modules) { // webpackBootstrap/******/ // 缓存模块/******/ var installedModules = {};/******/ /** * webpack函数加载模块,核心代码,根据模块id加载相应模块的exports函数. * * @param {string} moduleId *//******/ function __webpack_require__(moduleId) {/******//******/ // 检查模块是否已经加载/******/ if(installedModules[moduleId]) { // 如果已经加载返回该模块的exports函数/******/ return installedModules[moduleId].exports;/******/ }/******/ // 模块未加载,创建新模块,并且把模块加入缓存/******/ var module = installedModules[moduleId] = {/******/ i: moduleId, // 模块id/******/ l: false, // load,是否加载,默认为false/******/ exports: {} // 模块导出函数,默认为空对象/******/ };/******//******/ // 根据模块id调用入参中传入的模块函数,关键核心代码, // 如果该模块中还存在未加载的依赖模块,则会递归调用__webpack_require__进行加载/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);/******//******/ // 标记本模块为已加载/******/ module.l = true;/******//******/ // 返回模块导出函数/******/ return module.exports;/******/ }/******//******//******/ // 暴露模块函数的对象(__webpack_modules__)/******/ __webpack_require__.m = modules;/******//******/ // 暴露缓存的模块/******/ __webpack_require__.c = installedModules;/******//******/ // identity function for calling harmony imports with the correct context/******/ __webpack_require__.i = function(value) { return value; };/******//******/ // 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/******/ });/******/ }/******/ };/******//******/ // 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;/******/ };/******//******/ // Object.prototype.hasOwnProperty.call/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };/******//******/ // __webpack_public_path__/******/ __webpack_require__.p = "";/******//******/ // 加载入口模块,并且返回exports函数/******/ return __webpack_require__(__webpack_require__.s = 2);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports) {/** * Created by Administrator on 2017/5/30. */module.exports.say = function () { console.log('foot say function')}/***/ }),/* 1 *//***/ (function(module, exports) {/** * Created by Administrator on 2017/5/30. */module.exports = function () { console.log('head module')}/***/ }),/* 2 *//***/ (function(module, exports, __webpack_require__) {/** * Created by Administrator on 2017/5/30. */var head = __webpack_require__(1)var foot = __webpack_require__(0)head();foot.say();/***/ })/******/ ]);
这个函数初看觉得貌似很复杂,特别是项目开发代码都加载上去的时候,实际上可以简化成如下形式:
(function (modules) { // webpack 启动函数 // webpack加载模块函数 等等。。。})([ (function (module, exports) { // 依赖的函数1 }),(function (module, exports) { // 依赖的函数2 }),(function (module, exports, __webpack_require__) { // 入口函数,app.js })])
本质上是一个立即执行的函数,传入的参数为各个被包裹的依赖模块,最后一个函数一般包裹的是入口文件,如果加载的模块中存在对其他模块的依赖关系,则入参会多接收一个webpack_require参数,用于在模块函数中获取依赖模块的exports函数。
现在再回头看接口暴露函数module.exports才可以被外部获取就非常好理解了:)
阅读全文
0 0
- webpack模块加载介绍
- webpack前端模块加载工具
- webpack前端模块加载工具
- Webpack自动化模块加载及构建#1
- Webpack自动化模块加载及构建#2
- 【webpack】 模块加载器兼打包工具
- webpack 模块
- Webpack-源码一,使用require加载并打包模块
- Javascript模块加载捆绑器Browserify Webpack和SystemJS用法
- 05、模块加载方式介绍
- webpack构建react应用三:使用webpack Loaders 模块加载器(一)
- webpack构建React应用四:使用webpack Loaders 模块加载器(二)
- webpack构建React应用五:使用webpack Loaders 模块加载器(三)
- webpack的使用(3) ----模块加载器以及webpack打包多个包
- webpack介绍
- Webpack介绍
- webpack(1):什么是webpack模块
- xUtils3.0使用介绍:图片加载模块
- day2
- <JavaSE> JVM相关知识点
- 利用OpenCV提取图像的边缘,并将检测的边缘重新保存在一个新的文件中
- GNU项目
- 对象的默认原型链
- webpack模块加载介绍
- MFC 多个RadioButton设为一组 vs2013
- nio的实现原理
- 谈一谈苹果原生的布局框架 NSLayoutConstraint 和 VFL
- Retrofit 2.X使用详解之请求头
- 路由器web界面分析(四)---学会追踪标签
- LeetCode题目7. Reverse Integer
- 新闻客户端
- Gradle依赖管理