---
tags: webpack,
disqus: hackmd
---

# webpack(4) Babel 翻譯javascript
[Babel官方網站](https://babeljs.io/)
[Babel簡體中文官方網站](https://www.babeljs.cn/)

npm install babel-loader @babel/core @babel/preset-env --save-dev

此處共裝了三隻
babel-loader
@babel/core
@babel/preset-nev

---

### babelrc
在專案資料夾底下建立一支<span style="font-weight: 900;">.babelrc</span>檔，並且在裡面打上像圖片紅匡部分

{
    "presets": ["@babel/preset-env"]
}

這裡其實就是告訴babel你的preset要用什麼
babelrc還有其他設定可以使用詳細內容還是要去官網看

---

### 打包
最後再到這個webpack.config.js裡面然後再module底下新增一個

test: /\.js$/,
use: ['babel-loader'],


一切都準備好後就可以run一下來看看成果了
還沒打包前我在我的src下的index.js寫了一點es6

打包後我們到dist下的index.js查看，按下ctrl+f搜尋arr
可以看到打包前let變成了var，箭頭函示變成了function

到這裡就算轉譯成功~

---

### 翻譯器preset-nev
官方有提供多種的preset，目前新推出的是env
至於他有什麼差別我並沒有去深入