webpack打包后的js文件

一个简单的示例查看其打包后的结果

// index.js
import {getA} from './a.js';
let name = 'haha';
function init() {
    getA();
}
init();

// a.js
import B from './b.js';
let a = 'haha'
export function getA() {
    B();
    console.log(a);
    return a;
}

// b.js
function B () {
    console.log('i am a B')
}

export default B;

其打包后的代码大体如下

1. webpack经过打包后， 所依赖的模块通过modules参数进行传入。 传入的参数modules中每个模块key具有唯一性，用对应的path表示； value中则包括每个模块下要执行的内容。
2. 采用匿名函数自执行的方式进行启动， installedModules用来缓存已经require的模块。
3. webpack_require方法进行模块的引入， 执行模块代码。 在执行过程中如再次遇到require模块则递归执行。
4. 匿名函数对webpack_require进行一系列的静态方法和属性设置后， 通过webpack_require进行入口函数的调用。

webpack_require 上的静态方法

1. webpack_require.d 给exports上的属性定义一个getter方法，用于获取。
   如上述的a文件中 export方法会生成__webpack_require__.d(__webpack_exports__, \"getA\", function() { return getA; }); 这用通过exports的getA即可拿到对应的方法。 webpack_exports 当前模块传入的exports的对象。
2. webpack_require.r 在exports绑定__esModule对es6模块进行标注。
3. webpack_require_.n 获取default的对象， 即直接import出来的对象。

依赖模块编译部分在下面采用对比的方式进行查看

 (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;
    }


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

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

    // 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 });
    };

    // create a fake namespace object 伪造命名空间
    // mode & 1: value is a module id, require it
    // mode & 2: merge all properties of value into the ns
    // mode & 4: return value when already ns object
    // mode & 8|1: behave like require
    __webpack_require__.t = function(value, mode) {
        if(mode & 1) value = __webpack_require__(value);
        if(mode & 8) return value;
        if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
        var ns = Object.create(null);
        __webpack_require__.r(ns);
        Object.defineProperty(ns, 'default', { enumerable: true, value: value });
        if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
        return ns;
    };

    // 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 = "";


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

/***/ "./src/webpack/a.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"getA\", function() { return getA; });\n/* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b.js */ \"./src/webpack/b.js\");\n\nlet a = 'haha'\nfunction getA() {\n    Object(_b_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"])();\n    console.log(a);\n    return a;\n}\n\n//# sourceURL=webpack:///./src/webpack/a.js?");

/***/ }),

/***/ "./src/webpack/b.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\nfunction B () {\n    console.log('i am a B')\n}\n\n/* harmony default export */ __webpack_exports__[\"default\"] = (B);\n\n//# sourceURL=webpack:///./src/webpack/b.js?");

/***/ }),

/***/ "./src/webpack/index.js":
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ \"./src/webpack/a.js\");\n\nlet name = 'haha';\nfunction init() {\n    Object(_a_js__WEBPACK_IMPORTED_MODULE_0__[\"getA\"])();\n}\ninit();\n\n//# sourceURL=webpack:///./src/webpack/index.js?");

/***/ })

 });

index.js

1. 首先通过webpack_require.r将当前文件标记为es6模块
2. 遇到import 将其转为webpack_require进行子模块的加载。
3. 将用到a模块中的方法进行替换

import {getA} from './a.js';
let name = 'haha';
function init() {
    getA();
}
init();

__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _a_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./a.js */ "./src/webpack/a.js");

let name = 'haha';
function init() {
    Object(_a_js__WEBPACK_IMPORTED_MODULE_0__["getA"])();
}
init();

a.js

1. 与上述相同首先通过webpack_require.r将当前文件标记为es6模块
2. 将通过export 需要暴露到外部的属性定义到模块的exports对象上
3. 遇到import 将其转为webpack_require进行子模块的加载。
4. 将用到b模块中的方法进行替换， 该示例中返回的是b的default对象。

import B from './b.js';
let a = 'haha'
export function getA() {
    B();
    console.log(a);
    return a;
}

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getA", function() { return getA; });
/* harmony import */ var _b_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./b.js */ "./src/webpack/b.js");

let a = 'haha'
function getA() {
    Object(_b_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
    console.log(a);
    return a;
}

b.js

1. 通过webpack_require.r将当前文件标记为es6模块
2. 将default对象挂载到exports上。

function B () {
    console.log('i am a B')
}

export default B;
...
__webpack_require__.r(__webpack_exports__);
function B () {
    console.log('i am a B')
}
/* harmony default export */ __webpack_exports__["default"] = (B);

总结

从上面的示例中我们可以推测个一二， webpack打包会帮我们进行相关文件依赖的收集， 会对原始文件进行重新编译。
编译后的文件完成文件的执行，exports对象的挂载、子文件的递归调用等工作。