webpack 原理（一）

（1）webpack 可以做的事情：

代码转换（es6 -> es5，less、sass -> css）、文件优化（体积压缩）、代码分割、模块合并、自动刷新（webpack-dev-server）、代码校验（eslint）、自动发布

（2） webpack 打包

打包的意思是：支持 js 的模块化

（3）webpack 是 node 写出来的

（4）开发环境打包之后的代码以及解析

(function(modules) {
  // 模块缓存对象
  var installedModules = {};

  // 实现 require （__webpack_require__函数）
  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 函数
  __webpack_require__.m = modules;

  // __webpack_require__ 的 c 函数
  __webpack_require__.c = installedModules;

  // // __webpack_require__ 的 d 函数
  __webpack_require__.d = function(exports, name, getter) {
    if(!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, { enumerable: true, get: getter });
    }
  };

  // // __webpack_require__ 的 r 函数
  __webpack_require__.r = function(exports) {
    if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
      Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
    }
    Object.defineProperty(exports, '__esModule', { value: true });
  };
    
  // // __webpack_require__ 的 t 函数
  __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;
  };

  // __webpack_require__ 的 n 函数
  __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;
  };

  // // __webpack_require__ 的 o 函数
  __webpack_require__.o = function(object, property) { 
    return Object.prototype.hasOwnProperty.call(object, property); 
  };

  // // __webpack_require__ 的 p
  __webpack_require__.p = "";

  // 最终匿名函数返回 __webpack_require__函数，该函数 参数是 __webpack_require__.s，默认值是 "./src/index.js" (入口模块)
  // __webpack_require__ 接受参数是 moduleId，先判断缓存中时候是否有，有就从缓存中取，没有就放入缓存中
  // 然后导出 该 moduleId 的 exports
  return __webpack_require__(__webpack_require__.s = "./src/index.js");
  })

  ({
    // key-value 形式 key 是模块路径 value 是函数
    "./src/index.js":
    (function(module, exports) {
        eval("console.log(1)\n\n//# sourceURL=webpack:///./src/index.js?");
    })
  });

（5）devServer

编译时显示进度

devServer: {
    progress: true
}

（6）style-loader 和 css-loader

css-loader：解析以css后缀名的文件

style-loader：将解析好的 css 代码插入到 html 的 head 标签中 ，注意：不是link标签，<style></style>

loader 十从下到上执行、从右到左执行