webpack基礎篇-解析es6爲es5語法
上一節中，我們看webpack核心組成部門時，以解析.vue文件爲例進行的。
webpack原生支持js語法，但是es6有很多新特性，有些瀏覽器和webpack並不能很好的理解，這時需要藉助babel來進行把es6的語法轉爲es5語法。
一、webpack解析es6
使用的解析組件是babel-loader，而babel呢是需要依賴babel，所以我們用的時候需要安裝babel。
新版本的babel進行了更加詳細的拆分，按需安裝即可。
1，我們這裏先本地安裝babel-cli
npm install --save-dev @babel/core @babel/preset-env babel-loader
新版的babel，安裝形式爲@babel/core，之前的版本是babel-core，形式不同只是代表不同的版本號。
我們是用來解析es6的所有隻用到core和preset-env就可以了，所以這裏邊我們只安裝這個。
2，新建babel的配置.babelrc文件，和packjson同級
.babelrc的內容（推薦內容）想要深入瞭解babel的可以訪問它的官網https://www.babeljs.cn/docs/usage
{
"presets": [
"@babel/preset-env"
]
"plugins": [],
}
在.babelrc文件中一般會有presets和plugins兩個屬性值，presets更像是功能的集合，plugins對應的是每一個功能點，之後文章會細講這部分，或者可以直接去babel官網查看。
3，在webpack.config.js中module的rules下新增一個loader
module: {
rules: [
{ test: /\.vue$/,
loader: 'vue-loader',
},
{ test: /\.js$/,
loader: 'babel-loader',
},
]
},
test: /.js$/表示匹配到所有已js結尾的文件，都用babel這個loader。
修改後運行npm start打包，可以看到打包後的文件已經改變。
babel還有好多相關組件，以後用到什麼可以在單獨安裝什麼，比如transform-es2015-modules-commonjs，AMD和common的轉化等
總結
在沒有使用babel時，我們看下打包後的截圖，可以看到代碼裏用到的es6的語法打包後依然是es6的語法
而在使用babel後可以看到的文件中es6的語法被轉化成了es5的語法（下圖紅框裏內如）
