babel是將es6轉爲es5，而webpack從名字也能看出來，是一個打包工具，根據文件之間的依賴關係，將文件進行打包。
在這裏理清一下以上幾個概念以及他們之間的關係。
es6、babel和commonJS的關係
現在的瀏覽器很多都不支持es6的語法，或者僅僅是部分支持，比如你用.360瀏覽器，你會發現它支持let卻不支持箭頭函數等。
babel就承擔了“翻譯”的角色，把es6的寫法轉換成es5的寫法。
但是有些人可能在一個項目中單獨安裝完babel，併成功生成了新的文件後，發現導入這個文件到瀏覽器中卻報錯了。其中很有可能被誤導的是 import這個關鍵詞。
實際上babel轉換後的代碼是遵循commonJS規範的，而這個規範，瀏覽器並不能識別。因此導入到瀏覽器中會報錯，而nodeJS是commonJS的實現者，所以在babel轉換後的代碼是可以在node中運行的。
爲了將babel生成的commonJS規範的es5寫法能夠在瀏覽器上直接運行，我們就借住了webpack這個打包工具來完成，因爲webpack本身也是遵循commonJS這個規範的，從它的配置文件webpack.config.js中就可以看出來
//module.exports是commonJS的接口輸出規範，es6的規範是export
module.exports = {
entry: path.join(__dirname, 'index.js'),
output: {
path: path.join(__dirname, 'outs'),
filename: 'index.js'
},
};
es6和commonJS的關係
在es6標準出來之前，大家都是commonJS或者AMD規範來模塊化。而es6並沒有沿用commonJS的東西，所以他們之間並沒有什麼必要的聯繫。在這裏只談es6和commonJS的 導入和輸出的區別，其他深入的請自行了解
在commonJS中引入文件和輸出接口分別爲
require('./a');//引入
//對外接口
module.exports={
a:xxx,
b:function(){}
}
es6中的：
//引入
import {a,b,c} from './a';
//輸出
export {a,b,c}
完整的流程是 es6->es5(commonJS規範)->瀏覽器可執行代碼。 重點只在於他們是直接用es5寫還是用es6寫，用es6的話就多了一個轉換的步驟。
那麼我們應該如何利用webpack完成一整個步驟呢？即用es6寫法直接生成瀏覽器可識別的代碼，而不用單獨用babel指令生成代碼再轉換。webpack爲我們提供了一系列的方案。
- 首先我們創建一個空白項目
- 進入項目，並安裝以下各個依賴、
npm install --save webpack
npm install --save babel-loader
npm install --save babel-core
npm install --save babel-preset-es2015
自從babel升級6.x版本後就分成了兩個插件，一個是babel-core【終端運行】，(如果是node請安裝babel-cli )，一個是babel-preset-es2015
安裝完上述內容之後，需要設置一個.babelrc的文件放在根目錄下，內容爲
{
"presets": ["es2015"]
}
並且在webpack.config.js中配置babel-loader
module.exports = {
entry: "./js/main.js",
output:{
filename: 'bundle.js'
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel-loader"
}]
}
}
配置完成後，就可以直接在JS文件中使用es6的語法，然後通過webpack命令打包生成，即可。
總結：
問題：大多數瀏覽器不支持es6，解決：es6----babel–>es5(遵循commonjs規範)----webpack----->瀏覽器可執行的代碼。
當然，在webpack中也可以不使用babel，直接將es6–babel-loader等–>瀏覽器可執行的代碼。
參考文檔：https://www.cnblogs.com/ajianbeyourself/p/8863023.html