webpack ——代码分割ensure

require.ensure 异步加载（代码切割） 把js模块给独立导出一个.js文件，然后使用这个模块的时候， webpack会构造script dom元素，由浏览器发起异步请求这个js文件。 
mapBtn.click(function() { require.ensure([], function() { var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下 }) })

 分析: require.ensure这个函数是一个代码分离的分割线，表示 回调里面的require 是我们想要进行分割出去的，即require(’./baidumap.js’)，把baidumap.js分割出去，形成一个 webpack打包的单独js文件。当然ensure里面也是可以写一些同步的require的，比如 
var sync = require('syncdemo.js')   //下面ensure里面也用到 mapBtn.click(function() { require.ensure([], function() { var baidumap = require('./baidumap.js') //baidumap.js放在我们当前目录下 var sync = require('syncdemo.js')  //这个不会独立出去，因为它已经加载到模块缓存中了 }) })

 
ensure的第一个参数[] 是它依赖的异步模块的数组；第二个参数为回调函数，第三个参数为模块名，用于构建时生成文件名使用。注意：require.ensure模块只会被下载下来不会被执行，只有当回调函数使用require时这个模块才会被执行
实例： 
//同步加载：util-sync是立即马上依赖的工具箱。但是它又非常的大，所以将其配置打包成一个公共模块， 利用浏览器的并发加载，加快下载速度 var util_sync = require('./util-sync.js') alert(util_sync.data) document.getElementById("aBtn").onclick = function() { require.ensure([], function() { //workA-async不是entry.js必须有的，即可能发生的操作，那么我们把 他们利用异步加载，当发生的时候再去加载就行了 var awork = require('./workA-async.js') alert(awork.data) //异步里面再导入同步模块--实际是使用同步中的模块 var util1 = require('./util-sync.js') }) } document.getElementById("bBtn").onclick = function() { require.ensure([], function() { var bwork = require('./workB-async.js') alert(bwork.data) }) }