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

巴特西

webpack中，require的五种用法

最新文章

热门文章