其優勢主要可以歸類為如下幾個：
1. webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。
2. 能被模塊化的不僅僅是 JS 了。
3. 開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。
4. 擴展性強，插件機制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。
我們談談第一點。以 AMD/CMD 模式來說，鑒於模塊是異步加載的，所以我們常規需要使用 define 函數來幫我們搞回調：
|
1
2
3
4
5
6
7
8
|
define([
'package/lib'
],
function
(lib){
function
foo(){
lib.log(
'hello world!'
);
}
return
{
foo: foo
};
});
|
另外為了可以兼容 commonJS 的寫法，我們也可以將 define 這么寫：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
define(
function
(require, exports, module){
var
someModule = require(
"someModule"
);
var
anotherModule = require(
"anotherModule"
);
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
exports.asplode =
function
(){
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
});
|
然而對 webpack 來說，我們可以直接在上面書寫 commonJS 形式的語法，無須任何 define （畢竟最終模塊都打包在一起，webpack 也會最終自動加上自己的加載器）：
|
1
2
3
4
5
6
7
8
9
10
|
var
someModule = require(
"someModule"
);
var
anotherModule = require(
"anotherModule"
);
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
exports.asplode =
function
(){
someModule.doTehAwesome();
anotherModule.doMoarAwesome();
};
|
這樣擼碼自然更簡單，跟回調神馬的說 byebye~
不過即使你保留了之前 define 的寫法也是可以滴，畢竟 webpack 的兼容性相當出色，方便你舊項目的模塊直接遷移過來。