webpack目前是前端模块化中重要的一块，和gulp不同的是，gulp是根据流来打包的，webpack是一个模块打包工具。
本次，先从最简单的打包结果来分析。

webpack.config.js
之后的打包结果都基于该配置进行打包

  1. const path = require('path')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. module.exports = {
  4.   devtool: 'none',
  5.   mode: 'development',
  6.   entry: './src/index.js',
  7.   output: {
  8.     filename: 'build.js',
  9.     path: path.resolve('dist')
  10.   },
  11.   plugins: [
  12.     new HtmlWebpackPlugin({
  13.       template: './src/index.html'
  14.     })
  15.   ]
  16. }

单个js文件时

src目录下的index.js仅有两行代码

  1. console.log('进入了')
  2. module.exports = '首页'

打包后结果代码

  1. // modules => 立即执行传递的参数
  2. (function(modules) {
  3.     // 缓存对应module返回的值
  4.     var installedModules = {};
  5.     // 核心函数
  6.     function __webpack_require__(moduleId) {
  7.         // 如果存在缓存，直接返回缓存的值
  8.         if(installedModules[moduleId]) {
  9.             return installedModules[moduleId].exports;
  10.         }
  11.         // module对象
  12.         var module = installedModules[moduleId] = {
  13.             i: moduleId,
  14.             l: false,
  15.             exports: {}
  16.         };
  17.         // 绑定对应的this并传参执行
  18.     // 会对module.exports进行赋值
  19.         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  20.         // Flag the module as loaded
  21.         module.l = true;
  22.         // 返回module.exports
  23.         return module.exports;
  24.     }
  25.     // 保存传入的函数
  26.     __webpack_require__.m = modules;
  27.     // 保存缓存的值
  28.     __webpack_require__.c = installedModules;
  29.   // 入口函数
  30.   // 传入入口对象./src/index.js
  31.     return __webpack_require__(__webpack_require__.s = "./src/index.js");
  32. })({
  33.   /**
  34.    * 立即执行函数
  35.    * 传入的对象
  36.    */
  37.   "./src/index.js":
  38.   (function(module, exports) {
  39.       console.log('进入了')
  40.         // 此时会给module.exports赋值
  41.       module.exports = '首页'
  42.   })
  43. });

多个js文件时

  1. // demo.js
  2. export default 'this is demo'
  4. // index.js
  5. import demo from './demo';
  6. console.log('进入了')
  7. console.log(demo)

打包后结果代码。由此可以得出，如果是多个文件，会修改module.exports中的值。当其他文件访问时，再访问module.exports的值

  1. (function(modules) {
  2.     // 缓存对应module返回的值
  3.     var installedModules = {};
  4.     // 核心函数
  5.     function __webpack_require__(moduleId) {
  6.         // 如果存在缓存，直接返回缓存的值
  7.         if(installedModules[moduleId]) {
  8.             return installedModules[moduleId].exports;
  9.         }
  10.         // module对象
  11.         var module = installedModules[moduleId] = {
  12.             i: moduleId,
  13.             l: false,
  14.             exports: {}
  15.         };
  16.         // 绑定对应的this并传参执行
  17.     // 会对module.exports进行赋值
  18.         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  19.         // Flag the module as loaded
  20.         module.l = true;
  21.         // 返回module.exports
  22.         return module.exports;
  23.     }
  24.     // 保存传入的函数
  25.     __webpack_require__.m = modules;
  26.     // 保存缓存的值
  27.     __webpack_require__.c = installedModules;
  28.   // 如果是esModule，则添加标记
  29.     __webpack_require__.r = function(exports) {
  30.         if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
  31.             Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
  32.         }
  33.         Object.defineProperty(exports, '__esModule', { value: true });
  34.     };
  35.   // 入口函数
  36.   // 传入入口对象./src/index.js
  37.     return __webpack_require__(__webpack_require__.s = "./src/index.js");
  38. })({
  39.   // demo.js
  40.   "./src/demo.js":
  41.   (function(module, __webpack_exports__, __webpack_require__) {
  42.     "use strict";
  43.     // 即module.export.default = 'this is demo'
  44.     __webpack_exports__["default"] = ('this is demo');
  45.   }),
  46.   // index.js
  47.   "./src/index.js":
  48.   (function(module, __webpack_exports__, __webpack_require__) {
  49.     "use strict";
  50.     // 声明export.module
  51.         var _demo__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./demo */ "./src/demo.js");
  52.       console.log('进入了')
  53.       // 输出module.export.default
  54.       console.log(_demo__WEBPACK_IMPORTED_MODULE_0__["default"])
  55.   })
  56. });

由此可以得出，webpack默认使用的是commonJs规范。如果是commomJs规范，则直接使用module；如果是EsModule，则先需要进行标记为EsModule，并绑定default。因此，单从性能考虑，使用module.export比export default更佳。