本文從簡單的例子入手，從打包文件去分析以下三個(gè)問題：webpack打包文件是怎樣的？如何做到兼容各大模塊化方案的？webpack3帶來的新特性又是什么？

一個(gè)簡單的例子

webpack配置

 // webpack.config.jsmodule.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },};

簡單的js文件

 // src/index.js console.log('hello world');

webpack打包后的代碼

一看你就會(huì)想，我就一行代碼，你給我打包那么多？？？（黑人問號(hào)）

// dist/bundle.js /******/ (function(modules) { // webpackBootstrap/******/  // The module cache/******/  var installedModules = {};/******//******/  // The require function/******/  function __webpack_require__(moduleId) {/******//******/   // Check if module is in cache/******/   if(installedModules[moduleId]) {/******/    return installedModules[moduleId].exports;/******/   }/******/   // Create a new module (and put it into the cache)/******/   var module = installedModules[moduleId] = {/******/    i: moduleId,/******/    l: false,/******/    exports: {}/******/   };/******//******/   // Execute the module function/******/   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/******/  __webpack_require__.d = function(exports, name, getter) {/******/   if(!__webpack_require__.o(exports, name)) {/******/    Object.defineProperty(exports, name, {/******/     configurable: false,/******/     enumerable: true,/******/     get: getter/******/    });/******/   }/******/  };/******//******/  // 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 = 0);/******/ })/************************************************************************//******/ ([/* 0 *//***/ (function(module, exports) {console.log('hello world');/***/ })/******/ ]);