這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價值，有興趣的小夥伴們可以參考一下
webpack中可以寫commonjs格式的require同步語法，可以寫AMD格式的require回呼語法，還有一個require.ensure，以及webpack自己定義的require.include，再加上ES6的import語法，這麼多豈不是會把人搞亂。本篇就來梳理一下這些require各自的特點，以及都在什麼場景下使用。
commonjs同步語法
經典的commonjs同步語法如下：
var a = require('./a'); a.show();
此時webpack會將a .js打包進引用它的檔案中。這是最普遍的情形，不必贅述。
commonjs非同步載入
在commonjs中有一個Modules/Async/A規範，裡面定義了require.ensure語法。 webpack實現了它，作用是可以在打包的時候進行程式碼分片，並非同步載入分片後的程式碼。用法如下：
require.ensure([], function(require){
var list = require('./list');
list.show();
});此時list.js會被打包成一個單獨的chunk文件，大概長這樣：
1.fb874860b35831bc96a8.js
可讀性比較差。我在上一篇結尾也提到了，給它命名的方式，那就是給require.ensure傳遞第三個參數，如：
##
require.ensure([], function(require){
var list = require('./list');
list.show();
}, 'list');函數中引用了兩個以上的模組，webpack會把它們打包在一起，例如：
#
require.ensure([], function(require){
var list = require('./list');
list.show();
var edit = require('./edit');
edit.display();
}, 'list_and_edit');commonjs預先載入懶執行
在上面的用法中，我們給require.ensure的第一個參數傳了空數組，實際上這裡是可以接收模組名稱的，作用就是實作預先載入懶執行。用法如下：require.ensure(['./list'], function(require){
var list = require('./list');
list.show();
});webpack自帶的require.include
require.include是webpack自己提供的，並沒有什麼規範做後台，所以是個小角色。它可以實作上面是預先載入功能，而不用把模組寫在陣列中，用法如下：
#
require.ensure([], function(require){
require.include('./list');//此处只加载不执行
});require.ensure([], function(require){
require.include('./preview'); //加载
let p = require('./preview'); //执行
p.getUrl(); //使用
}, 'pre');AMD非同步載入
webpack既支援commonjs規範也支援AMD規範，這意味著AMD的經典語法是可以正常使用的，如：##
require(['./list'], function(list){
list.show();
});require(['./list', './edit'], function(list, edit){
list.show();
edit.display();
});这年头不用ES6都不好意思跟人打招呼。所以我们的代码中，又会多一种模块引入语法，那就是import。import会被转化为commonjs格式或者是AMD格式，所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的，你也不用费劲再把它转成AMD了。 所以如下写法是等价的： 不过这两种写法只需选一种，避免在代码中同时使用两种，否则会造成混淆。 总结 以上把require的用法捋了一遍，明白了各自用法的区别之后，我们就可以在项目中进行选择了。我觉得最佳选择是往commonjs方向靠拢，想尝试ES6的话就用import代替commonjs同步语法即可。 因此，代码中保持以下两种风格就好： 很显然，你在写代码的时候还是需要对打包结果进行决策，这是我不喜欢webpack的原因。gulp那样多好，编码就是编码，编译就是编译，分开来。不过这就是webpack以模块为核心的打包方式的特点吧，仁者见仁，只要团队内做一个约定，也不会打的一塌糊涂。 以上是require的五種用法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！import list from './list';
//等价于
var list = require('./list');
登入後複製//可打包在一起的同步代码，使用import语法
import list from './list';
//需要独立打包、异步加载的代码，使用require.ensure
require.ensure([], function(require){
var list = require('./list');
});登入後複製
