How webpack handle CommonJS?

README.md

我们遵循 CommonJS 规范定义了一个 lib 模块, 并在 demo.js 中调用这个模块, 之后通过 webpack 的处理得到 dist/demo.js

具体步骤

首先全局安装 webpack:

sudo yarn global add webpack webpack-cli

webpack 的默认配置文件为 webpack.config.js

在终端中执行:

webpack

得到被处理后的 dist/demo.js 文件

demo.js

var lib = require('./lib');

var test1 = lib.add(1, 2);
console.log(test1);

dist_demo.js

(function(modules) {
  var installedModules = {};

  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 = modules;
  __webpack_require__.c = installedModules;
  __webpack_require__.d = function(exports, name, getter) {
    if (!__webpack_require__.o(exports, name)) {
      Object.defineProperty(exports, name, {
        enumerable: true,
        get: getter
      });
    }
  };
  __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 = 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 = 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 = function(object, property) {
    return Object.prototype.hasOwnProperty.call(object, property);
  };
  __webpack_require__.p = '';
  return __webpack_require__((__webpack_require__.s = './demo.js'));
})({
  './demo.js': function(module, exports, __webpack_require__) {
    eval(
      'var lib = __webpack_require__(/*! ./lib */ "./lib.js");\n\nvar test1 = lib.add(1, 2);\nconsole.log(test1);\n\n\n//# sourceURL=webpack:///./demo.js?'
    );
  },
  './lib.js': function(module, exports) {
    eval(
      'module.exports.add = function(a, b) {\n  return a + b;\n};\n\n\n//# sourceURL=webpack:///./lib.js?'
    );
  }
});

lib.js

module.exports.add = function(a, b) {
  return a + b;
};

webpack.config.js

var path = require('path');

module.exports = {
  entry: path.join(__dirname, 'demo.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'demo.js'
  }
};