webpack对多个模块依赖进行打包

【 webpack3.0.0刚刚出来  所以文章是跟着低版本 教程 操作熟悉  结果好多对不上喔】

七：webpack对多个模块依赖进行打包

通过一刚开始我们了解到 webpack支持commonJS和AMD两种模块机制进行打包，因此我们现在来针对代码中使用commonJS和AMD机制进行做一个demo；

Src源文件增加module1.js module2.js module3.js 代码分别如下：

module1.js 代码：
// module1.js
require(["./module3"], function(){
    console.log("Hello Webpack!");
});

Module2.js代码如下：
// module2.js，使用的是CommonJs机制导出包
module.exports = function(a, b){
    return a + b;
}

Module3.js代码使用AMD机制

// module3.js，使用AMD模块机制
define(['./module2.js'], function(sum){
    return console.log("1 + 2 = " + sum(1, 2));
});
 // 入口文件 main.js 代码如下：
 require("./module1");

我们可以运行下 webpack后 在根目录下生成如下文件：

其中1.build文件夹是commonJS生成的 里面是commonJS的代码；我们再查看页面的代码如下可以看到：

【操作结果没有这样】

我们继续查看控制台输出如下：

  【操作结果没有输出】

为止我们可以看到webpack打包可以支持commonJS模块和AMD模块。