【 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模块。