webpack3打包后源文件代码解析

1.创建项目工程

1.1 创建一个项目文件，直接执行 npm -y init ; 初始化一个基础项目架构
1.2 安装依赖

npm install webpack webpack@3.10.0

1.2 package.json 添加构建命令

"build": "webpack --config webpack.config.js"

1.3 创建webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'dddd.js'
  }
}

1.4 创建文件结构

a 文件内容

const a = 'this is a file'
const log = () => a

module.exports = {
  log
}

b文件内容

const b = 'this is b file'
const log = () => b

module.exports = {
  log
}

index.js 文件内容

import ma from './a.js'
import mb from './b.js'
var a = 1
var b = 2
console.log('a+b', a + b)
console.log('a file', ma.log())
console.log('b file', mb.log())

2.构建输出

dddd.js 文件内容

(function (modules) {
  // 定义缓存对象
  var installedModules = {};
  // 定义获取依赖函数
  function __webpack_require__(moduleId) {
    // 如果以获取过该依赖，直接从缓存依赖中返回
    if (installedModules[moduleId]) {
      return installedModules[moduleId].exports;
    }
    // 定义模块对象
    var module = installedModules[moduleId] = {
      i: moduleId,
      l: false,
      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;
  // 定义对象获取方法
  __webpack_require__.d = function (exports, name, getter) {
    // 判断对象上是否存在该属性方法
    if (!__webpack_require__.o(exports, name)) {
      // 定义属性获取方法
      Object.defineProperty(exports, name, {
        configurable: false,
				enumerable: true,
        get: getter
      })
    }
  }
  // 定义判断对象属性是否存在方法
  __webpack_require__.o = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  }

  // 获取getter
  __webpack_require__.n = function (module) {
    var getter = module && module.__esModule ?
    function getDefault() { console.log('获取劫持'); return module['default'] } :
    function getModuleExports() { console.log('获取劫持'); return module; };
    __webpack_require__.d(getter, 'a', getter);
    return getter
  }

  // 入口函数
  __webpack_require__(0);

})([
  (function (module, exports, __webpack_require__) {
    var __WEBPACK_IMPORTED_MODULE_0__a_js__ = __webpack_require__(1);
    var __WEBPACK_IMPORTED_MODULE_0__a_js__default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0__a_js__);
    var __WEBPACK_IMPORTED_MODULE_1__b_js__ = __webpack_require__(2);
    var __WEBPACK_IMPORTED_MODULE_1__b_js__default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1__b_js__);
    console.log('a file', __WEBPACK_IMPORTED_MODULE_0__a_js__default.a.log())
    console.log('b file', __WEBPACK_IMPORTED_MODULE_1__b_js__default.a.log())
  }),
  (function (module, exports) {
    const a = 'this is a file'
    const log = () => a

    module.exports = {
      log
    }
  }),
  (function (module, exports) {
    const b = 'this is b file'
    const log = () => b

    module.exports = {
      log
    }
  })
])