webpack是前端工程師必備神器梧喷，幫助我們解決了很多打包、構(gòu)建娇钱、部署伤柄、磨平各種js模塊差異等細(xì)瑣的工作。堅(jiān)信真相使人自由文搂，今天我們來(lái)看看就究竟做了什么

打包后的代碼

首先我們看下webpack打包后的代碼，這是設(shè)置library為umd的情況秤朗。他是一個(gè)立即執(zhí)行函數(shù)煤蹭，接受root和factory兩個(gè)參數(shù)，主要看下factory參數(shù)，它的返回也是一個(gè)立即執(zhí)行函數(shù)

(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() {  ... //這個(gè)函數(shù)里就是打包的代碼, 也即是factory函數(shù)體})

我們?cè)倏聪耭actory函數(shù)，它會(huì)返回一個(gè)立即執(zhí)行函數(shù)稽物，其結(jié)果就是你入口文件導(dǎo)出的結(jié)構(gòu)奄毡。我們可以看到，我們的各個(gè)模塊會(huì)被組合成一個(gè)數(shù)組傳入這個(gè)webpack handle function贝或。

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

我們?cè)倏聪?code>webpack handle function body, 首先看下入?yún)⒑蛂eturn吼过，入?yún)⒕褪俏覀兯玫母鱾€(gè)模塊modules，返回就是我們?nèi)肟谖募?code>./src/index.js exports 的結(jié)果咪奖。其他具體的可以看下里面的注釋

return (function(modules) { // webpackBootstrap
/******/    // The module cache 主要是緩存盗忱，保證了每個(gè)模塊只會(huì)excute一遍，提高速度
/******/    var installedModules = {};
/******/
/******/    // 這就是我們?cè)陧?xiàng)目源碼中使用的require函數(shù)羊赵，webpack會(huì)把require函數(shù)替換成__webpack_require__趟佃，
/******/    // 如果做過(guò)electron等其他項(xiàng)目的同學(xué)應(yīng)該會(huì)知道這個(gè)是個(gè)小坑，需要特殊處理下
/******/    function __webpack_require__(moduleId) {
/******/
/******/        // Check if module is in cache 這沒(méi)啥好說(shuō)的昧捷，緩存中直接返回
/******/        if(installedModules[moduleId]) {
/******/            return installedModules[moduleId].exports;
/******/        }
/******/        // 沒(méi)有命中緩存就新建一個(gè)module對(duì)象闲昭，用于存儲(chǔ)moduleId一個(gè)模塊
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {}
/******/        };
/******/
/******/        // 我們所說(shuō)的每一個(gè)文件會(huì)封裝成一個(gè)函數(shù)，這個(gè)函數(shù)就在這里調(diào)用靡挥，執(zhí)行的上下文是個(gè)空對(duì)象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;
/******/    }
/******/
/******/    // 這下面設(shè)置了一些標(biāo)志和工具函數(shù)
/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;
/******/
/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;
/******/
/******/    // define getter function for harmony exports 導(dǎo)出的各個(gè)name設(shè)置到exports對(duì)象上
/******/    __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設(shè)置__esModule標(biāo)志
/******/    // 主要是es6模塊最后也需要轉(zhuǎn)換成commonjs的形式序矩，設(shè)置了這個(gè)標(biāo)志就表明這個(gè)模塊是從es6 module形式轉(zhuǎn)過(guò)來(lái)的
/******/    __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

我們接下來(lái)示例展示下webpack的tree-shaking功能。

webpack默認(rèn)是自帶tree-shaking功能的芹血，如果項(xiàng)目中使用了babel贮泞，就需要注意babel默認(rèn)會(huì)接管webpack的模塊轉(zhuǎn)化功能（即我們所說(shuō)的es6 module最終需要轉(zhuǎn)化成commonjs形式）,這時(shí)候我們需要關(guān)閉babel的這個(gè)功能，只需要在.babelrc中設(shè)置"modules": false幔烛，或者是babel-loader的options中設(shè)置啃擦。

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

我們現(xiàn)在寫(xiě)個(gè)index.js作為webpack的entry，引用了util.js中的a和c

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

a();
c();

這是util.js饿悬，里面還 export 了個(gè)b

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

我們看下打包出來(lái)的結(jié)果令蛉，沒(méi)有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');
};

/***/ })

原來(lái)webpacktree-shaking只會(huì)在mode: 'poduction'下做狡恬，我們?cè)趐roduction下再build下看下結(jié)果

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

我的老哥珠叔，tree-shaking的非常直接，直接把代碼放到了index模塊里弟劲，連require和export都省了祷安，貌似有點(diǎn)過(guò)分了啊

通過(guò)一些簡(jiǎn)單的demo我們可以更加清楚的知道webpack是怎么組織我們的js代碼的，怎么磨平模塊差異的兔乞，可以加深對(duì)webpack打包的理解

有興趣的還可以看下這篇文章汇鞭，給了我很多啟發(fā)