webpack是前端工程师必备神器，帮助我们解决了很多打包、构建、部署、磨平各种js模块差异等细琐的工作。坚信真相使人自由，今天我们来看看就究竟做了什么

打包后的代码

首先我们看下webpack打包后的代码，这是设置library为umd的情况。他是一个立即执行函数，接受root和factory两个参数，主要看下factory参数，它的返回也是一个立即执行函数

(function webpackUniversalModuleDefinition(root, factory) {
    // 这里只是各种判定，以适配各种乱七八杂的模块格式(amd,cmd,es6)，保证你在什么情况下引用都OJBK
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else {
        var a = factory();
        for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
    }
})(window, function() {  ... //这个函数里就是打包的代码, 也即是factory函数体})

我们再看下factory函数，它会返回一个立即执行函数，其结果就是你入口文件导出的结构。我们可以看到，我们的各个模块会被组合成一个数组传入这个webpack handle function。

// factory函数
function() {
  return (function(modules) { /*webpack handle function body*/ })([ 
     { 'modules1': (fucntion (){  /*module1 body*/  })}, 
     { 'modules1': (fucntion (){  /*module1 body*/  })},
      ....
  ]);
}

我们再看下webpack handle function body, 首先看下入参和return，入参就是我们所用的各个模块modules，返回就是我们入口文件./src/index.js exports 的结果。其他具体的可以看下里面的注释

return (function(modules) { // webpackBootstrap
/******/    // The module cache 主要是缓存，保证了每个模块只会excute一遍，提高速度
/******/    var installedModules = {};
/******/
/******/    // 这就是我们在项目源码中使用的require函数，webpack会把require函数替换成__webpack_require__，
/******/    // 如果做过electron等其他项目的同学应该会知道这个是个小坑，需要特殊处理下
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache 这没啥好说的，缓存中直接返回
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // 没有命中缓存就新建一个module对象，用于存储moduleId一个模块
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // 我们所说的每一个文件会封装成一个函数，这个函数就在这里调用，执行的上下文是个空对象module.exports
/******/        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 导出的各个name设置到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 给exports设置__esModule标志
/******/    // 主要是es6模块最后也需要转换成commonjs的形式，设置了这个标志就表明这个模块是从es6 module形式转过来的
/******/    __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/index.js");
/******/ })

tree-shaking

我们接下来示例展示下webpack的tree-shaking功能。

webpack默认是自带tree-shaking功能的，如果项目中使用了babel，就需要注意babel默认会接管webpack的模块转化功能（即我们所说的es6 module最终需要转化成commonjs形式）,这时候我们需要关闭babel的这个功能，只需要在.babelrc中设置"modules": false，或者是babel-loader的options中设置。

{
    "presets": [
      ["env", {"modules": false}]
    ],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "React.createElement"
        }]
    ]
}

我们现在写个index.js作为webpack的entry，引用了util.js中的a和c

// index.js
import { a, c } from './util';

a();
c();

这是util.js，里面还 export 了个b

// util.js
export const a = () => {
  console.log('a');
}
export const b = () => {
  console.log('b');
}
export const c = () => {
  console.log('c')
}

我们看下打包出来的结果，没有tree-shaking，a b c都在

/***/ "./src/util.js":
/*!*********************!*\
  !*** ./src/util.js ***!
  \*********************/
/*! exports provided: a, b, c */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return a; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return b; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "c", function() { return c; });
var a = function a() {
  console.log('a');
};
var b = function b() {
  console.log('b');
};
var c = function c() {
  console.log('c');
};

/***/ })

原来webpacktree-shaking只会在mode: 'poduction'下做，我们在production下再build下看下结果

[function (e, t, n) {
    "use strict";
    n.r(t);
    console.log("a"), console.log("c")
  }]

我的老哥，tree-shaking的非常直接，直接把代码放到了index模块里，连require和export都省了，貌似有点过分了啊

通过一些简单的demo我们可以更加清楚的知道webpack是怎么组织我们的js代码的，怎么磨平模块差异的，可以加深对webpack打包的理解

有兴趣的还可以看下这篇文章，给了我很多启发