一、 模塊化開發
模塊化開發說白了就不必在html頁面，引用所有的js文件。所有的js文件都進行模塊化設置，模塊之間可以相互引用。Webpack模塊化開發是使用module.exports進行相關方法和屬性的導出，提供其它模塊使用。 每個模塊都有自己的作用域， 並且每個模塊的屬性和方法都是局部的，其它的模塊是無法使用，所以，如果模塊要使用其它模塊的屬性或者方法，必須使用module.exports進行導出，這個方案使用了閉包。
module.exports的導出命令:
屬性:module.exports.age=12;
方法:module.exports.sayAge=function(){}
二、添加模塊
在login.js文件分別導出userName屬性和sayName()方法，代碼如下：
var userName="68kejian.com";
module.exports.userName=userName;
module.exports.sayName=function(){
return userName;
};
三、 require()方法引入模塊
Webpack 對 CommonJS 的 AMD 的語法做了兼容, 方便遷移代碼 不過實際上, 引用模塊的規則是依據 CommonJS 來的
require('lodash') // 從模塊目錄查找
require('./file') // 按相對路徑查找
這裏注意一下：模塊查找和相對目錄的查找的寫法，模塊查找是不需要"./",直接寫上模塊名字，這裏的模塊一般是node_modules模塊。
Webpack提供了require()方法進行模塊的引用，它可以引用css、js、圖片等文件， 相當的方便。引用的時候文件的後綴名可加可不加，Webpack 自動會進行文件的查找，匹配相關的文件，如果項目有兩個文件login.css和login.js這個時候就需要添加後綴名了。
下面我們在index.js文件 通過require()方法引入login.js文件，
index.js文件內容：
var login=require('./login');//引用模塊
alert(login.sayName());//使用 引用模塊的方法
上面代碼中引用了login.js文件，把它賦值給了一個login變量，這樣就可以使用login模塊導出的任何屬性和方法了。使用方式是不是和麪向 字面量對象一樣！其實，require()會把引入的模塊導出的所有的屬性或者方法自動編譯爲面向字面量對象。
四、編譯運行index.html
使用webpack 命令，重新編譯文件，這個時候bundle.js 文件會自動更新
運行index.html文件這個時候彈出login.js中 的userName的變量值