webpack中可以寫commonjs格式的require同步語法，可以寫AMD格式的require回調(diào)語法，還有一個(gè)require.ensure，以及webpack自己定義的require.include，再加上ES6的import語法，這么多豈不是會把人給搞亂。本篇就來梳理一下這些require各自的特點(diǎn)，以及都在什么場景下使用。

commonjs同步語法

經(jīng)典的commonjs同步語法如下：

var a = require('./a');a.show();

此時(shí)webpack會將a.js打包進(jìn)引用它的文件中。這是最普遍的情形，不必贅述。

 commonjs異步加載

在commonjs中有一個(gè)Modules/Async/A規(guī)范，里面定義了require.ensure語法。webpack實(shí)現(xiàn)了它，作用是可以在打包的時(shí)候進(jìn)行代碼分片，并異步加載分片后的代碼。用法如下：

require.ensure([], function(require){  var list = require('./list');  list.show();}); 

此時(shí)list.js會被打包成一個(gè)單獨(dú)的chunk文件，大概長這樣：

1.fb874860b35831bc96a8.js

可讀性比較差。我在上一篇結(jié)尾也提到了，給它命名的方式，那就是給require.ensure傳遞第三個(gè)參數(shù)，如：

require.ensure([], function(require){  var list = require('./list');  list.show();}, 'list'); 

這樣就能得到你想要的文件名稱：

list.fb874860b35831bc96a8.js

你也可以傳入像"question/list"這樣帶層級的名字，這樣webpack會按照層級給你創(chuàng)建文件夾。

需要注意的是，如果你在require.ensure的函數(shù)中引用了兩個(gè)以上的模塊，webpack會把它們打包在一起，比如：

require.ensure([], function(require){  var list = require('./list');  list.show();  var edit = require('./edit');  edit.display();}, 'list_and_edit'); 

list.js和edit.js將會被打包成一個(gè)文件，并命名為list_and_edit.js。這就需要根據(jù)你的實(shí)際情況來衡量了，如果你不希望打包在一起，只能寫兩個(gè)require.ensure分別引用這兩個(gè)文件。

多說一句，這種思維其實(shí)我是很不喜歡的，在編碼階段卻要對打包的事情做出決策，明顯違背了職責(zé)分離原則。

 commonjs預(yù)加載懶執(zhí)行

在上面的用法中，我們給require.ensure的第一個(gè)參數(shù)傳了空數(shù)組，實(shí)際上這里是可以接收模塊名稱的，作用就是實(shí)現(xiàn)預(yù)加載懶執(zhí)行。用法如下：

require.ensure(['./list'], function(require){  var list = require('./list');  list.show();}); 

給require.ensure的第一個(gè)參數(shù)傳了['./list']，執(zhí)行到這里的時(shí)候list.js會被瀏覽器下載下來，但是并不會執(zhí)行l(wèi)ist.js模塊中的代碼，也就是webpack官網(wǎng)說的，不會進(jìn)行evaluate。真正進(jìn)行evaluate的時(shí)候是到了后面這句var list = require('./list');這就是所謂的懶執(zhí)行。

寫在函數(shù)中的多個(gè)模塊會被打包在一起，這一點(diǎn)和上面沒有區(qū)別。另外，寫在數(shù)組中的模塊也會跟他們打包在一起，不管你有沒有手動執(zhí)行。