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