最近開始學習webpack4, 有一個新功能，是可以用import做動態載入。
ES6的import語法告訴我們，模組只能做靜態載入。
所謂靜態載入，就是你不能寫成如下形式：

let filename  = 'module.js';
import {mod} from './' + filename. 

也不能寫成如下形式：

if(condition) {
import {mod} from './path1'
} else {
import {mod} from './path2'
}

但是現在有新提案讓import進行動態載入，雖然還沒有被ECMA委員會批准，但是webpack已經開始用了。

大致用法是這樣的：

let filename = 'module.js'; 

import('./' + filename). then(module =>{
    console(module);
}).catch(err => {
    console(err.message); 
});

//如果你知道 export的函式名
import('./' + filename). then(({fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

//如果你用的是export
 
 default function() 
import('./' + filename). then(module =>{
    console(module.default);
}).catch(err => {
    console(err.message); 
});

//或者
import('./' + filename). then(({default:fnName}) =>{
    console(fnName);
}).catch(err => {
    console(err.message); 
});

這裡有一點要注意的是：
import的載入是載入的模組的引用。而import()載入的是模組的拷貝，就是類似於require(),怎麼來說明？看下面的例子：

module.js 檔案：

export let counter = 3;
export function incCounter() {
  counter++;
}

main.js 檔案：

let filename = 'module.js'; 
 import('./' + filename).then(({counter, incCounter})=>{
 console.log(counter); //3
 incCounter(); 
 console.log(counter); //3
 }); 

import {counter, incCounter} from './module.js';
console.log(counter); //3
incCounter();
console.log(counter); //4