webpack中引入文件的几种写法

1、COMMONJS规范下的同步加载

var a = require ('./a');
a.dosomething();

 

2、COMMONJS规范下的异步加载

　　webpack实现了commonjs规范下的require.ensure方法，具体用法如下：

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

　　这里a.js和b.js会被打包成同一个文件，文件名称为‘bundlefileName’，如果文件名称写成路径形式的话，webpack会按照指定路径进行打包生成；

 

3、COMMONJS规范下的预加载懒执行

　　这种形式是上述形式的变种

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

　　这种情况下，a.js会先被下载下来，知道出现“require('./a')”语句的时候才会执行，类似AMD规范

4、webpack自带的require.include

　　作用是只加载不执行，还有一个作用是提取父子模块中的公共部分，用的地方不多

require.ensure([], function(require){
    require.include('./a');//此处只加载不执行
});

　　如果加载的模块要执行的话：

require.ensure([], function(require){
    require.include('./a');//此处只加载不执行
    var a = require('./a');
    a.dosomething();
});

　　

5、ES6的import

　　作用和require等价

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