webpack異步加載文件的方式

1. import 

import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal')
import ( /* webpackChunkName: "yourFileName" */ filePath);
import ( /* webpackChunkName: "lodash" */ 'lodash').then(({
        default: _
    }) => {
        console.log(_)
    }).catch(error => 'An error occurred while loading the component');

2. require.ensure

//將A單獨打包
require.ensure([],()=>{
    require(A)
},"bundleA")；

//將A,B打包到一起，而且從主文件束中拆分出來。但只有 b.js 的內容被執行。a.js //的內容僅僅是可被使用，但並沒有被輸出。
//想去執行 a.js，我們需要異步地引用它，如 require(‘./a.js’)，讓它的 JavaScritp 被執行。
require.ensure([A],()=>{
    require(B)
},bundleAB)

3. bundle-loader

本質上對require.ensure的包裝，需要在配置文件中配置，使用不夠靈活，對ES6支持也不好，不推薦

webpack所有的異步加載模塊方式，都是調用__webpack_require__.e方法，就是requireEnsure方法，使用JSONP來加載異步文件。