Skip to content

Instantly share code, notes, and snippets.

@rmlzy

rmlzy/README.md

Created April 12, 2019 07:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rmlzy/f0a9841b55e60d72f8d2152c2ce9da45 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rmlzy/f0a9841b55e60d72f8d2152c2ce9da45 to your computer and use it in GitHub Desktop.
Download ZIP
How webpack handle CommonJS?
Raw
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 文件

Raw
demo.js
var lib = require('./lib');
var test1 = lib.add(1, 2);
console.log(test1);
Raw
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?'
);
}
});
Raw
lib.js
module.exports.add = function(a, b) {
return a + b;
};
Raw
webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, 'demo.js'),
output: {
path: path.join(__dirname, 'dist'),
filename: 'demo.js'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment