资讯专栏INFORMATION COLUMN

webpack打包结果说明

doodlewind / 3187人阅读

摘要:打包入口模块模块打包结果打包结果是一个立即执行函数表达式缓存所有模块输出的内容检查缓存中是否有该模块,如果有则返回该模块的如果没有,则执行下面的步骤运行该模块,并将模块的输出放置在缓存中创建一个新的模块模块的模块的输出是否加载到缓存中模块的

打包入口

import {message, methods} from "./module01"
const sayHello = require("./module02")
function component() {
  sayHello()
  methods()
  var element = document.createElement("div");
  
  element.innerHTML = message

  return element;
}

document.body.appendChild(component());

模块1

const message = "hello world"
console.log("this is module01")
const methods = function(){
  console.log("hello world")
}
export {message, methods}

模块2

const sayHello = () => {
  console.log("hello world")
}
const sayBye = () => {
  console.log("Bye Bye")
}
console.log("this is module02")
exports.sayHello =  sayHello
exports.sayHello = sayBye

打包结果

打包结果是一个立即执行函数表达式

(function (modules) {
  // 缓存所有模块”输出“的内容
  var installedModules = {};

  function __webpack_require__(moduleId) {
    /*
     *检查缓存中是否有该模块,如果有则返回该模块的export
     *如果没有,则执行下面的步骤:运行该模块,并将模块的”输出“放置在缓存中 
     */
    if (installedModules[moduleId]) {

      return installedModules[moduleId].exports;

    }
    // 创建一个新的模块
    var module = installedModules[moduleId] = {
      i: moduleId,   // 模块的id
      l: false,      // 模块的”输出“是否加载到缓存中
      exports: {}    // 模块的”输出“

    };
    // 执行对应的模块,并将模块的”输出“绑定到module.exports上
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    // 修改是否加载的标识
    module.l = true;
    // 返回模块的”输出“
    return module.exports;

  }
  // 所有的模块
  __webpack_require__.m = modules;
  // 所有被缓存的模块
  __webpack_require__.c = installedModules;
  // 定义一个getter方法
  __webpack_require__.d = function (exports, name, getter) {
    // 如果一个对象没有name对应的属性,则在该对象上定义该属性
    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_public_path__
  __webpack_require__.p = "";
  // 从第一个模块开始加载(执行)
  return __webpack_require__(__webpack_require__.s = 0);

})// 匿名函数定义结束
([
  /* 0:打包的起点,起始模块 */
  (function (module, __webpack_exports__, __webpack_require__) {
     // 由于该模块使用了ES6语法import,所以需要在“输出”的对象上定义 __esModule属性
     "use strict";
     Object.defineProperty(__webpack_exports__, "__esModule", {
       value: true
     });
     /* 表明模块1是通过ES6语法来导入的 */
     var __WEBPACK_IMPORTED_MODULE_0__module01__ = __webpack_require__(1);

     // 表明模块2是通过CommonJS语法来导入的
     const sayHello = __webpack_require__(2)

     function component() {
       sayHello()
       // 调用模块1输出的b方法
       Object(__WEBPACK_IMPORTED_MODULE_0__module01__["b"])()
       var element = document.createElement("div");
       // 使用模块1输出的a属性
       element.innerHTML = __WEBPACK_IMPORTED_MODULE_0__module01__["a"]

       return element;
     }

     document.body.appendChild(component());

     /***/
   }),
  /* 1 */
  (function (module, __webpack_exports__, __webpack_require__) {
     // 当前模块是通过ES6语法来导入/输出模块的
     "use strict";
     /* 根据顺序,将当前模块输出定义在 __webpack_exports__上 */
     __webpack_require__.d(__webpack_exports__, "a", function () {
       return message;
     });
     /* harmony export (binding) */
     __webpack_require__.d(__webpack_exports__, "b", function () {
       return methods;
     });
     const message = "hello world"
     console.log("this is module01")
     const methods = function () {
       console.log("hello world")
     }
   }),
  /* 2 */
  (function (module, exports) {

     const sayHello = () => {
       console.log("hello world")
     }
     const sayBye = () => {
       console.log("Bye Bye")
     }
     console.log("this is module02")
     // 模块2是通过CommonJS的方式输出的,所以直接在exports上添加“输出”结果
     exports.sayHello = sayHello
     exports.sayHello = sayBye

     /***/
   })
]);

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/92170.html

相关文章

  • 详解Webpack+Babel+React开发环境的搭建

    摘要:安装要开始使用在项目中进行开发前我们首先需要在全局环境中进行安装。使用它可以将的语法转换为的语法,以便在现在有的环境执行。,是一段正则,表示进行匹配的资源类型。为指定应该被忽略的文件,我们在这儿指定了。 1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS、Babel、Coffeescript、Les...

    yuanzhanghu 评论0 收藏0
  • webpak最全的简单入门

    摘要:了解什么是官方文档是这样介绍的点我了解官方文档简单的来说,可以看做是模块打包机它做的事情是,分析你的项目结构,找到模块以及其它的一些浏览器不能直接运行的拓展语言,等,并将其转换和打包为合适的格式供浏览器使用。 了解webpack 什么是webpack 官方文档是这样介绍的:点我了解官方文档 简单的来说,WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaSc...

    FreeZinG 评论0 收藏0
  • Vue2学习之旅一:初始化项目搭建(不带路由)

    摘要:除此之外,你还可以运行打包命令此时之前说的打包生成的文件应该就生成了,或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道,因此开头引入了,并使用它常见了一个对象,然后这个对象就管理了这一块区域。 作者:心叶时间:2018-04-25 16:33 本篇最终项目文件Github地址:github.com/paper520/vue.quick/tree/V1 Vue...

    lijy91 评论0 收藏0
  • webpack2兼容IE8以下代码

    摘要:可用编译低版本代码水有多深不得而知启动新技术提供测试框架进行单元测试,代码覆盖率报告,可与和快速对接。页面的其他资源文件,通过引入单元测试项目启动环境配置为了把保证项目正常运行,请自行更新相关环境。 项目地址:https://github.com/sayll/ie-webpack-start ie-webpack-start showImg(https://segmentfault....

    StonePanda 评论0 收藏0
  • webpack4.x 模块化浅析-CommonJS

    摘要:先看下官方文档中对模块的描述在模块化编程中,开发者将程序分解成离散功能块,并称之为模块。每个模块具有比完整程序更小的接触面,使得校验调试测试轻而易举。 先看下webpack官方文档中对模块的描述: 在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块。每个模块具有比完整程序更小的接触面,使得校验、调试、测试轻而易...

    alphahans 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<