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