WEB前端：es6转es5后，把es5模块化代码打包后，加载打包脚本仍然报错。

Question

项目基本情况：

本人使用ol地图插件，要使用拖拽功能，搜索官网后发现相关代码是es6的，本人没接触过，于是临时补习，得知es6目前浏览器支持不理想，然后就用babel把es6转换为es5，此时发现转换的es5是模块化的，有大量的require函数，浏览器也不能支持，最后查了资料说需要把es5模块化的JS打包，我是个菜鸟序员，不太理解打包为何意，所以理解为用相关工具把带有依赖(require)的各个JS合并成一个，于是我使用了grunt来打包，后来检查输出的JS，确实把很多JS都合并在里面了，本以为HTML加载了这个合并的JS就可以了，但是....问题如下

问题：
运行HTML提示require not default，
然后我又加载了require.js,HTML报错：Uncaught Error: Module name "ol/index.js" has not been loaded yet for context: _. Use require([])....,到目前为止我知道的问题在于合并的JS中涉及require相关写法格式不合适(网上查的)，babel转es5后的写法是：var _index = require('ol/index.js');
但是浏览器提示我应该使用“require([])”格式的写法....
但是如果我手动修改，那将是非常巨大的工作量...依赖的层级太多了

疑问
1、我是否对require等模块化的语法有误解，特别是“打包”的含义。
2、我参考的地图插件在HTML是完全可以运行的，是否我的环境部署和配置错误了，如果错误为什么可以使用grunt能够合并大量的模块化JS。
3、如果只是“require([])”格式问题，有没有什么方法能在es6转es5的时候就按照这种格式输出呢？