Webpack2 入门踩坑教程（五）

注：非原创，原文来自：http://blog.csdn.net/alanfancy/article/details/64444204
本人通过此链接博客学习，并在此基础上增加自己的想法。

上节Webpack2 入门踩坑教程（四）：http://blog.csdn.net/echo601/article/details/76195411

五.使用babel对es6/es7转码

1：安装babel核心模块

npm install babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 –save-dev 

各模块的作用如下：

"babel-core"            //转换器 
"babel-loader"          //转换器的加载器 
"babel-preset-es2015"   //ES2015转码规则 
"babel-preset-stage-0"  //es7支持，ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个stage-0，stage-1，stage-2，stage-3

2：在项目文件添加.babelrc文件，加入转码规则
可以使用命令行的方式添加.babelrc文件，在git bash下，输入 touch .babelrc 命令即可创建（windows自带命令行无效）
在.babelrc文件中输入以下信息（转码规则）：

{ "presets":["es2015","stage-0"]}

3：修改webpack.config.js文件，添加loaders模块设置

这里一定要注意！添加loader的方式要这样写，我之前写成和我学习的那个博文一样，报错得一塌糊涂，看了官方文档才发现已经改了，要写成下面这样：

module.exports = {
    entry: entry,
    plugins: plugins,
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    },
    output: {
        path: path.join(__dirname, 'dist'), // 指定打包之后的文件夹 
        publicPath: '/dist/', // 指定资源文件引用的目录 
        filename: 'bundle.js' // 指定打包为一个文件 bundle.js 
    }
}

4：在index.js中添加es6格式的方法

var messages = require('./messages');
var newMessage = () => ('<p>' + messages.hi + '，' + messages.event + "</p>");
var app = document.getElementById('app');
app.innerHTML = newMessage();
if(module.hot) { //启用热重载 
    module.hot.accept();
}

5：命令行运行npm run dev测试，并修改数据验证程序。