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打包的理解
有兴趣的还可以看下这篇文章，给了我很多启发
