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模塊。