---
# System prepended metadata

title: webpack(4) Babel 翻譯javascript
tags: [webpack]

---

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

# webpack(4) Babel 翻譯javascript
[Babel官方網站](https://babeljs.io/)
[Babel簡體中文官方網站](https://www.babeljs.cn/)
``` HTML=
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>檔，並且在裡面打上像圖片紅匡部分
![](https://i.imgur.com/225XmOx.png)
``` HTML=
{
    "presets": ["@babel/preset-env"]
}
```
這裡其實就是告訴babel你的preset要用什麼
babelrc還有其他設定可以使用詳細內容還是要去官網看

---

### 打包
最後再到這個webpack.config.js裡面然後再module底下新增一個
``` HTML=
test: /\.js$/,
use: ['babel-loader'],
```
![](https://i.imgur.com/8I30HN2.png)

一切都準備好後就可以run一下來看看成果了
還沒打包前我在我的src下的index.js寫了一點es6
![](https://i.imgur.com/2wq64Gg.png)

打包後我們到dist下的index.js查看，按下ctrl+f搜尋arr
![](https://i.imgur.com/eCbEMz3.png)
可以看到打包前let變成了var，箭頭函示變成了function

到這裡就算轉譯成功~

---

### 翻譯器preset-nev
官方有提供多種的preset，目前新推出的是env
至於他有什麼差別我並沒有去深入
![](https://i.imgur.com/fmZndsm.png)
