import的加载是加载的模块的引用。而import()加载的是模块的拷贝，就是类似于require(),怎么来说明？看下面的例子
module.js 文件：
[cc lang=”js”]export let counter = 3;
export function incCounter() {
counter++;
}[/cc]
main.js 文件：
[cc lang=”js”]let filename = ‘module.js’;
import(‘./’ + filename).then(({counter, incCounter})=>{
console.log(counter); //3
incCounter();
console.log(counter); //3
}); [/cc]
[cc lang=”js”]import {counter, incCounter} from ‘./module.js’;
console.log(counter); //3
incCounter();
console.log(counter); //4[/cc]
commonjs同步语法
经典的commonjs同步语法如下：
var a = require(‘./a’);
a.show();
commonjs异步加载
[cc lang=”js”]
require.ensure([ ], function(require){
var list = require(‘./list’);
list.show();
}, ‘list’); // 第三个参数 可以有可无 是给chunk命名
[/cc]
此时list.js会被打包成一个单独的chunk文件，大概长这样 :list.fb874860b35831bc96a8.js
如果你在require.ensure的函数中引用了两个以上的模块，webpack会把它们打包在一起，比如：
[cc lang=”js”]require.ensure([ ], function(require){
var list = require(‘./list’);
list.show();
var edit = require(‘./edit’);
edit.display();
}, ‘list_and_edit’);
[/cc]
list.js和edit.js将会被打包成一个文件，并命名为list_and_edit.js。这就需要根据你的实际情况来衡量了，如果你不希望打包在一起，只能写两个require.ensure分别引用这两个文件。
commonjs预加载懒执行
在上面的用法中，我们给require.ensure的第一个参数传了空数组，实际上这里是可以接收模块名称的，作用就是实现预加载懒执行。用法如下：
先下载 后执行
[cc lang=”js”]
require.ensure([ ‘./list’], function(require){
var list = require(‘./list’);
list.show();
});
执行到这里的时候list.js会被浏览器下载下来，但是并不会执行list.js模块中的代码，真正进行evaluate的时候是到了后面这句var list = require(‘./list’)
[/cc]
webpack自带的require.include
require.include是webpack自己提供的，并没有什么规范做后台，所以是个小角色。它可以实现上面是预加载功能，而不用把模块写在数组中，用法如下：
[cc lang=”js”]
require.ensure([ ], function(require){
require.include(‘./preview’); //加载
let p = require(‘./preview’); //执行
p.getUrl(); //使用
}, ‘pre’);
[/cc]
AMD异步加载
webpack既支持commonjs规范也支持AMD规范，这就意味着AMD的经典语法是可以正常使用的，如：
[cc lang=”js”]
require([ ‘./list’], function(list){
list.show();
});
//多文件
require([ ‘./list’, ‘./edit’], function(list, edit){
list.show();
edit.display();
});
[/cc]