require.ensure()
在webpack 2的官網上寫了這麼一句話：
require.ensure() is specific to webpack and superseded by import().
所以，在webpack 2裏面應該是不建議使用require.ensure()這個方法的。但是目前該方法仍然有效，所以可以簡單介紹一下。包括在webpack 1中也是可以使用。
下面是require.ensure()的語法：
require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)
require.ensure()接受三個參數：
- 第一個參數dependencies是一個數組，代表了當前require進來的模塊的一些依賴；
- 第二個參數callback就是一個回調函數。其中需要注意的是，這個回調函數有一個參數require，通過這個require就可以在回調函數內動態引入其他模塊。值得注意的是，雖然這個require是回調函數的參數，理論上可以換其他名稱，但是實際上是不能換的，否則webpack就無法靜態分析的時候處理它；
- 第三個參數errorCallback比較好理解，就是處理error的回調；
- 第四個參數chunkName則是指定打包的chunk名稱。
import()
這裏的import不同於模塊引入時的import，可以理解爲一個動態加載的模塊的函數(function-like)，傳入其中的參數就是相應的模塊。例如對於原有的模塊引入import react from 'react'可以寫爲import('react')。但是需要注意的是，import()會返回一個Promise對象。因此，可以通過如下方式使用：
btn.addEventListener('click', e => {
// 在這裏加載chat組件相關資源 chat.js
import('/components/chart').then(mod => {
someOperate(mod);
});
});
可以看到，使用方式非常簡單，和平時我們使用的Promise並沒有區別。當然，也可以再加入一些異常處理：
btn.addEventListener('click', e => {
import('/components/chart').then(mod => {
someOperate(mod);
}).catch(err ＝> {
console.log('failed');
});
});
當然，由於import()會返回一個Promise對象，因此要注意一些兼容性問題。解決這個問題也不困難，可以使用一些Promise的polyfill來實現兼容。可以看到，動態import()的方式不論在語意上還是語法使用上都是比較清晰簡潔的。
原文地址： https://blog.csdn.net/jacktesla/article/details/80796775