上一篇介紹了在用Webpack建立專案資料夾，並打包 JavaScript建立網站。這篇就來介紹如何用Webpack設定Loader來將JavaScript ES6的語法編譯成ES5。
什麼是Loader？可以把Loader想成一個套件，能幫我們將語法編譯成我們需要的樣子。例如現今並非所有瀏覽器的支援度都支援ES6的語法，為了瀏覽器的兼容性，讓程式可以在每個不同的瀏覽器順利執行我的JavaScript，此時我們就能利用Loader來協助我們完成這項工作，而不用自己辛辛苦苦地將ES6語法改成ES5語法!
今天我們要用的 Loader 叫做 Babel，它有許多各式各樣的套件可以套用，在這篇文章會使用以下三個套件：
babel-core，這是Babel的核心套件，功能是產出新的程式碼。babel-loader，這個套件讓babel 和 Webpack 連動。babel-preset-env，這個套件可以當作是語法規則書，負責將語法進行轉換，例如今天我們要將 ES6 的語法轉成 ES5 。
首先，我們先在cmd中，到我們上一篇的專案資料夾安裝這三個套件：
npm install -D babel-core @babel/core @babel/preset-env
--save-dev
接著我們要修改webpack設定檔案 webpack.config.js，在裡面加上module屬性：
module這個屬性是讓 Webpack啟動時加入指定的套件。接著裡面再加入一個 rules屬性。 rules 是由物件組成的陣列，每個物件告訴 Webpack 要使用那些套件去編譯檔案。rules 中還有兩個屬性。use 是指定要使用的套件，如我們要用的 babel-loader 這個套件。而 test 需要輸入一個正規表示式( Regular Expression , 簡稱RegExp)，表示我們要處理 .js 結尾的所有檔案都要使用 babel-loader 來編譯。
接著，我們在index.js輸入一些ES6語法，如：
let myName = "york",
numA = 20,
numB = 7;let content = `My name is ${myName}, My lucky number is ${2*(numA + numB)}`;let gretting = ()=>console.log(` Hi, Arrow!, ${content}`)
gretting()
在cmd執行打包：
webpack -p
查看我的的bundle.js檔案，裡頭會將程式碼縮成1行，可以從中找到我們ES6語法的一小段程式碼如下：
在chrome的console執行結果：
如此確認我們確實把ES6的語法轉乘ES5了!完整的程式碼，也可以到我的Github下載程式碼，並給予我星星XD下一篇會再來介紹如何用webpack建立CSS的預處理器開發環境。
這是小弟第一次撰寫webpack的文件，如果有不足的地方，再請各方大大多多說明、補充謝謝!
