webpack搗鼓筆記

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打包的理解

有興趣的還可以看下這篇文章，給了我很多啟發