require.ensure简单理解

所有 js模块 打包成一个 bundle.js 太大了，可以把某些 js模块 单独打包，等要用到的时候，webpack 自动创建 script 标签去请求这个js文件

require.ensure

require.ensure(
    [], // 依赖
    () => {// 回调函数，在这里按需引入模块和处理逻辑
        require('@/components/home')
    }, 
    'demo') // webpackChunk名，同名的打包进同个bundle
}

举个例子：

aClick.js 和 bClick.js 是点击按钮之后才会用到，所以单独打包，按需加载。假设文件很大。

util.js 是开头就要用的工具箱，直接打包进 bundle.js

entry.js 是打包入口，实现按钮事件的监听，在回调函数里用 require.ensure 实现相应模块的按需加载

// aClick.js
let data = "按钮A点击事件发生时加载"
module.exports = { data };

// bClick.js
let data = "按钮B点击事件发生时加载"
module.exports = { data };

// util.js
let data = "这个是工具箱"
module.exports = { data };

// entry.js
const util = require('./util')
alert(util.data);

document.querySelector("#A").onclick = function() {

    require.ensure([], function() { // 处理事件逻辑之前会先引入模块
        var awork = require('./aClick.js')
        alert(awork.data)
    })
}

document.querySelector("#B").onclick = function() {

    require.ensure([], function() {
        var bwork = require('./bClick.js')
        alert(bwork.data)
    })
}

打包结果：打包出3个js文件：bundle.js打包了entry和util、aclick的bundle、bclick的bundle

运行结果：先加载bundle.js，点击按钮A加载aclick的bundle，点击按钮B加载bclick的bundle