## webpack babel
### 安裝
核心
babel-core
功能
babel-loader
babel-preset-env
babel-preset-react
#### babel-loader 7.x 版本安裝
```shell
cnpm install babel-core babel-loader@7 babel-preset-env babel-preset-react --save
```
安裝的 `babel-loader` 是7.x版本，8.x版本目前會出現報錯，具體如何解決還沒有了解清楚，所以安裝 `babel-loader` 時需要寫成這樣的 `babel-loader@7`
#### babel-loader 8.x 版本安裝
```shell
cnpm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react -S
```
上面為 `babel-loader 8.x` 版本安裝，需要匹配下面的 8.x 配置
### 配置
#### babel-loader 7.x 版本配置
第一種 全在 `webpack.config.js` 中配置
```js
rules:[
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:['env','react']
}
},
// 排除node_,modules 文件
exclude:/node_modules/
}
]
```
第二種 新建 `.babelrc` 文件 （推薦使用第二種）
webpack.config.js
```js
rules:[
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader'
},
// 排除node_,modules 文件
exclude:/node_modules/
}
]
```
.baelrc
```
{
"presets": [
"env",
"react"
]
}
```
#### babel-loader 8.x 版本配置
第一種 全在 `webpack.config.js` 中配置
```js
rules:[
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:['"@babel/preset-env','"@babel/preset-react']
}
},
// 排除node_,modules 文件
exclude:/node_modules/
}
]
```
第二種 新建 `.babelrc` 文件 （推薦使用第二種）
webpack.config.js
```js
rules:[
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader'
},
// 排除node_,modules 文件
exclude:/node_modules/
}
]
```
.baelrc
```
{
"presets": [
""@babel/preset-env",
""@babel/preset-react"
]
}
```
