webpack中，require的五种用法

a.js:

module.exports = function(x){
    console.log(x);
}    

 

一，commonjs同步：

var b = require('./a');
b('你好')
//你好

 

二，commonjs异步加载：

根据 require.ensure([预加载模块项]，fn,文件名称) 语法，webpack实现了它，作用是可以在打包的时候进行代码分片，并异步加载分片后的代码：

require.ensure(['./a'],function(require){
　　var a = require('./a');
　　a('hello')
},'b')

dist打包下js中的文件名称就是b.js

 

三，webpack自带的require.include

它可以实现上面是预加载功能，而不用把模块写在数组中;

require.include还有一个作用是能把子模块中的公共部分，提取到父模块中；

require.ensure([],function(require){
   require.include('./a') ;//此处只加载，不执行；
   let b = require('./a'); //执行
   b('你好')； 
},'b');

 

四，AMD异步加载

webpack既支持commonjs规范也支持AMD规范，这就意味着AMD的经典语法是可以正常使用的，如：

require(['./a'],function(a){
   a('你好');
});

当然，这样写的话list.js也是被单独打包成一个文件的。与上面类似，如果你在这里写了多个模块，那么这些模块都会被打包成一个文件,如：

require(['./a','./b'],function(a,b){
    a.show();
    b.hide();
})

 a.js和b.js会被打包在一起。不同的是，AMD的方式无法传入第三个参数当文件名，所以得不到很好看的文件

 

五，ES6 import

import会被转化为commonjs格式或者是AMD格式，所以不要把它认为是一种新的模块引用方式。babel默认会把ES6的模块转化为commonjs规范的，你也不用费劲再把它转成AMD了。

import a from './a';
//等价于
var list = require('./list');

不过这两种写法只需选一种，避免在代码中同时使用两种，否则会造成混淆。

 

总结：

//可打包在一起的同步代码，使用import语法
import list from './a';
 
//需要独立打包、异步加载的代码，使用require.ensure
require.ensure(['./a'], function(require){
    var a = require('./a');
});

 

参考地址：

http://www.cnblogs.com/laneyfu/p/6262321.html

转载于:https://www.cnblogs.com/wang715100018066/p/7275436.html