TooBug

Appearance

CommonJS模块打包

经过前面非模块化和AMD打包的例子，本节我们就不再绕圈子，直接看例子。

HTML代码和之前仍然是一样的，不再重复，JS文件如下：

入口文件example1.1.js：

javascript
var example2 = require('./example1.2');
example2.sayHello();
var example2 = require('./example1.2');
example2.sayHello();

被依赖的example1.2.js：

javascript
var me = {
    sayHello:function(){
        alert('hello world!');
    }
};
module.exports = me;
var me = {
    sayHello:function(){
        alert('hello world!');
    }
};
module.exports = me;

同样使用webpack编译就能看到相同的弹窗。

我们直接来看编译后的代码https://github.com/TooBug/webpack-guide/blob/master/examples/chapter2/commonjs/bundle1.1.js：

呃。是不是惊呆了？前41行Runtime仍然长得那个鸟样，而后面的两个模块代码，几乎和我们编写时完全一样！！唯一的改动是require被替换成了__webpack_require__了。

那就假装webpack是天然支持CommonJS的吧。所以通过这个例子也能感觉到，在使用webpack的项目中，使用CommonJS规范会省事很多。