003_webpack 配合babel 將es6轉成es5

今天接觸了webpack，第一次使用webpack進行轉碼，竟然稀里糊塗就成功了，哈哈。

下面附上流程

創建個文件夾，初始化一下，首先全局安裝webpack

npm install webpack --save-dev  

然后安裝babel

npm install --save-dev babel-core babel-preset-es2015  
npm install --save-dev babel-loader  

在當前文件夾內執行安裝，然后創建兩個文件夾一個src作為源文件夾，一個bin，保存生成的文件夾的列表 

在src文件夾內創建一個文件app.js，里面寫入現在瀏覽器不全支持的es6代碼

let a = 111;  
let b = 222;  
var xxx = (c,d) => c*d;  
console.log(xxx(a,b));  

然后在根目錄創建一個文件名為webpack.config.js

module.exports = {    
    entry: './src/app.js',    
    output: {    
        path: __dirname,    
        filename: './bin/app.bundle.js',    
    },    
    module: {    
        loaders: [{    
            test: /\.js$/,    
            exclude: /node_modules/,    
            loader: 'babel-loader'    
        }]    
    }    
}    

然后再創建一個用於babel調用的文件，名為.babelrc

里面寫入

{ "presets": [ "es2015" ] }  

然后在當前目錄打開cmd，

運行命令 webpack

如果出現綠色的，證明成功了

然后去bin目錄里面找到app.bundle.js發現里面下面會有這段代碼

function(module, exports) {  
  
"use strict";  
  
var a = 111;  
var b = 222;  
var xxx = function xxx(c, d) {  
  return c * d;  
};  
console.log(xxx(a, b));  

#copy_url:http://blog.csdn.net/qq_30100043/article/details/53402618