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实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码。用法如下：

1 2 3 4

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

　　

此时list.js会被打包成一个单独的chunk文件，大概长这样：

1.23874860b35831bcdh76.js

可读性比较差。我在上一篇结尾也提到了，给它命名的方式，那就是给require.ensure传递第三个参数，如：

1 2 3 4

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