本套课程将讲解如何用webpack来编译ES6，课程分为两节，第一节我们来安装ES6编译所需要的环境以及编译的配置，主要包括以下内容:
安装webpack和ES6编译环境
配置ES6编译
安装webpack编译环境
webpack编译环境主要就包括安装node和安装webpack，在侠课岛其他系列的教程里面已经讲解过，这里就不多介绍了。不熟悉的同学可以查看一下安装教程。点我去查看
安装好编译环境之后，如果还没有package.json就初始化一个，然后新建一个空白的webpack.config.js做为webpack的配置文件。
安装编译插件
要实现ES6的编译，我们这里使用的是babel插件，所以先安装babel相关的功能模块。依次执行：npm i babel-core -d，这个是babel的核心功能模块；npm i babel-loader -d，这个是babel的加载模块；npm i babel-preset-env，这个模块规定babel加载哪些插件和 polyfill的preset，它相对于之前指定版本的preset具有更好的灵活性，可以指定需要兼容的浏览器类型和版本，然后babel自动将你的代码编译成支持兼容的代码。
安装完成之后，你的项目下面会产生node_modules文件夹。
配置webpack.config.js
关于webpack.config.js文件的基本结构内容，在之前的webpack相关教程里面也有介绍过，这里我们就直接开始配置。点我查看
配置多文件入口
在我们实际开发项目中，页面结构肯定不会像示例那样只有一个页面，一个js文件，而是由很多个页面以及页面对应的js构成，如果全部打包进一个js文件，最终会导致这个文件非常大，所以我们可以根据页面来配置不同页面的入口文件，为每个页面单独打包一个js文件。
首先我们在根目录下创建一个src文件夹，放置我们的样式和ES6源代码，然后让webpack根据es6文件夹下面的文件名生成多个入口文件。
打开webpack.config.js，设置文件入口。webpac entries的格式可以为单个的文件目录，也可以用对象或者数组来表示多个文件入口，我们需要的是多个文件入口，所以创建一个方法来遍历./src/es6下面的文件，动态生成一个entry的对象做为值。这样就不用一个个手动添加，当然如果你的文件名和数量是固定不变的，也可以采用手写的方法，只是后期不好扩展。
使用glob模块来遍历文件夹下面的文件路径，生成一个数组，赋值给entry。对于glob不熟悉的还可以在控制台打印出来这个生成的对象。
配置好entry和output之后，在命令行执行webpack，可以看到生成的dist文件夹，并且按照文件个数重新编译成js文件啦~这样我们就可以根据页面的需要来动态引入。
