webpack，异步加载，代码分割，require.ensure

webpack异步加载的原理

webpack ensure相信大家都听过。有人称它为异步加载，也有人说做代码切割，那这
个家伙到底是用来干嘛的？其实说白了，它就是把js模块给独立导出一个.js文件的，然后使用这个
模块的时候，webpack会构造script dom元素，由浏览器发起异步请求这个js文件。

场景分析:

比如应用的首页里面有个按钮，点击后可以打开某个地图。打开地图的话就要利用百度地图的js,于是
我们不得不在首页中把百度地图的js一起打包进去首页,一个百度地图的js文件是非常大的，假设为
1m，于是就造成了我们首页打包的js非常大，用户打开首页的时间就比较长了。

有没有什么好的解决方法呢？

解决1

既然打包成同一个js非常大的话，那么我们完全可以把百度地图js分类出去，利用浏览器的并发请求
js文件处理，这样的话，会比加载一个js文件时间小得多。嗯，这也是个不错的方案。为baidumap.js
配置一个新的入口就行了，这样就能打包成两个js文件，都插入html即可（如果baidumap.js被多个
入口文件引用的话，也可以不用将其设置为入口文件，而且直接利用CommonsChunkPlugin,导出到一个
公共模块即可）可以参考我之前文章

webpack模块打包

那还有没有更好的解决方案呢？

解决2

当然还是有的！我们细想，百度地图是用户点击了才弹出来的，也就是说，这个功能是可选的。那么解决
方案就来了，能不能在用户点击的时候，我在去下载百度地图的js.当然可以。那如何实现用户点击的时候
再去下载百度地图的js呢？于是，我们可以写一个按钮的监听器

mapBtn.click(function() {
  //获取 文档head对象
  var head = document.getElementsByTagName('head')[0];
  //构建