這篇文章應該是這個系列的最後一篇，之後如果有用到的話還是會慢慢分享 webpack 相關的設定方式。
由於使用 React 通常會搭配 JSX 語法來做開發，而這樣的撰寫方式並不能直接被瀏覽器所解析，所以我們就會需要用到 Babel 來幫助我們轉譯成瀏覽器看得懂的 JS 語法。 因此這篇文章主要會解說如何在 Webpack 裡面 Babel 相關的設定，應該不會太長，讓我們繼續看下去吧！
安裝及設定 babel-loader
前幾章節有說過 loader 是一系列用來轉譯的套件，所以要在 webpack 裡面使用 babel 我們也必須使用 babel-loader，參考 Github 上的安裝指令：
npm install -D babel-loader @babel/core @babel/preset-env webpack
其中 @babel/core 是babel 的主要部分，而 preset-env 是針對那些 JS 最新公佈但瀏覽器還沒有支援的語法做轉譯。
然後只要在 module 裡面加入以下程式碼，就可以開始設定跟使用 babel 囉：
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
其中 option 內的 presets 是為了告訴babel想要用什麼模組去做轉譯，babel 把可能的轉換整理成一系列的 preset ，當然也包含 react 的preset 啦，等等就會看到。
安裝 babel-preset-react
如上提到的，babel 也提供了 react 轉譯相關的模組，在 webpack 的設定方式也不難，先安裝：
npm install --save-dev @babel/preset-react
然後ㄧ樣在 preset 裡面加上 ‘@babel/preset-react’， webpack 就會自動套用到啦，然後因為這個 preset也包含 JSX 的轉譯，所以就不用另外安裝相關模組了。到這邊你應該可以開始使用 react 跟 jsx 來做開發了，後面會陸續分享 webpack 相關，比較細節的其他設定，請大家耐心等候囉。
