[FE] 借助webpack与babel写ES6 module

ES6引入了module的概念，让我们可以把不同功能的代码分离开，写成module的形式。
因为目前的浏览器环境，并不支持ES6 module写法，
所以我们需要借助webpack打包工具和babel转译器来生成可运行的代码。

我们只需要配置入口js文件，webpack会自动解析模块间的依赖关系，
通过babal-loader调用babel去转译相应的模块，最后打包成一个目标js文件。

---

（1）全局安装Webpack和Babel

npm install -g webpack babel-cli

（2）项目根目录安装babel-preset-es2015和babal-loader

npm install babel-preset-es2015 babel-loader 

（3）项目根目录添加两个配置文件

webpack.config.js：

module.exports = {
    entry: ['./src/main.js'],
    output: {
        path: './target/',
        filename: 'main.js'
    },
    module: {
        loaders: [{
            test: /.js$/,
            loader: 'babel-loader'
        }]
    }
};

.babelrc：

{
  "presets": [
    "es2015"
  ],
  "plugins": []
}

---

注：
如果代码中用到了generator，需要安装babel-polyfill，

npm install --save-dev babel-polyfill

然后在webpack.config.js的entry属性中增加babel-polyfill配置项，

 entry: ['babel-polyfill', './src/main.js'],

对于多入口的工程，可以按需引用，

entry: {
    index: ['babel-polyfill', './index.js'],
    example: './example/index.js'
},

---

参考：
Using ES6 Modules with Webpack
Polyfill