详解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'); 

这样就能得到你想要的文件名称：

list.fb874860b35831bc96a8.js

你也可以传入像"question/list"这样带层级的名字，这样webpack会按照层级给你创建文件夹。

需要注意的是，如果你在require.ensure的函数中引用了两个以上的模块，webpack会把它们打包在一起，比如：

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

list.js和edit.js将会被打包成一个文件，并命名为list_and_edit.js。这就需要根据你的实际情况来衡量了，如果你不希望打包在一起，只能写两个require.ensure分别引用这两个文件。

多说一句，这种思维其实我是很不喜欢的，在编码阶段却要对打包的事情做出决策，明显违背了职责分离原则。

 commonjs预加载懒执行

在上面的用法中，我们给require.ensure的第一个参数传了空数组，实际上这里是可以接收模块名称的，作用就是实现预加载懒执行。用法如下：

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

给require.ensure的第一个参数传了['./list']，执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，也就是webpack官网说的，不会进行evaluate。真正进行evaluate的时候是到了后面这句var list = require('./list');这就是所谓的懒执行。

写在函数中的多个模块会被打包在一起，这一点和上面没有区别。另外，写在数组中的模块也会跟他们打包在一起，不管你有没有手动执行。