本文从简单的例子入手，从打包文件去分析以下三个问题：webpack打包文件是怎样的？如何做到兼容各大模块化方案的？webpack3带来的新特性又是什么？
一个简单的例子
webpack配置
// webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, };
简单的js文件
// src/index.js console.log('hello world');
webpack打包后的代码
一看你就会想，我就一行代码，你给我打包那么多？？？（黑人问号）
// 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'); /***/ }) /******/ ]);
我们来分析一下这部分代码，先精简一下，其实整体就是一个自执行函数，然后传入一个模块数组
(function(modules) { //... })([function(module, exports) { //.. }])
好了，传入模块数组做了什么(其实注释都很明显了，我只是大概翻译一下）
/******/ (function(modules) { // webpackBootstrap /******/ // The module cache 缓存已经load过的模块 /******/ 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, //模块id /******/ 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 为ES6 exports定义getter /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { // 假如exports本身不含有name这个属性 /******/ Object.defineProperty(exports, name, { /******/ configurable: false, /******/ enumerable: true, /******/ get: getter /******/ }); /******/ } /******/ }; /******/ /******/ // getDefaultExport function for compatibility with non-harmony modules 解决ES module和Common js module的冲突，ES则返回module['default'] /******/ __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配置下的公共路径 /******/ __webpack_require__.p = ""; /******/ /******/ // Load entry module and return exports 最后执行entry模块并且返回它的暴露内容 /******/ return __webpack_require__(__webpack_require__.s = 0); /******/ }) /************************************************************************/ /******/ ([ /* 0 */ /***/ (function(module, exports) { console.log('hello world'); /***/ }) /******/ ]);
整体流程是怎样的呢
传入module数组
调用__webpack_require__(__webpack_require__.s = 0)
构造module对象，放入缓存
调用module,传入相应参数modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); （这里exports会被函数内部的东西修改）
标记module对象已经加载完毕
返回模块暴露的内容（注意到上面函数传入了module.exports,可以对引用进行修改）
模块函数中传入module, module.exports, __webpack_require__
执行过程中通过对上面三者的引用修改，完成变量暴露和引用
webpack模块机制是怎样的
我们可以去官网看下webpack模块
webpack 模块能够以各种方式表达它们的依赖关系，几个例子如下：
ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句。
样式(url(...))或 HTML 文件()中的图片链接(image url)
强大的webpack模块可以兼容各种模块化方案，并且无侵入性(non-opinionated)
我们可以再编写例子一探究竟
CommonJS
修改src/index.js
var cj = require('./cj.js'); console.log('hello world'); cj();
新增src/cj.js，保持前面例子其他不变
// src/cj.js function a() { console.log("CommonJS"); } module.exports = a;
再次运行webpack