require.ensure()

在webpack 2的官網上寫了這麼一句話：

require.ensure()is specific to webpack and superseded byimport().

所以，在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