前言

　　目前，ES6（ES2015）這樣的語法已經得到很大規模的應用，它具有更加簡潔、功能更加強大的特點，實際專案中很可能會使用採用了ES6語法的模組，但瀏覽器對於ES6語法的支援並不完善。為了實現相容，就需要使用轉換工具對ES6語法轉換為ES5語法，babel就是最常用的一個工具。那麼在webpack中如何使用babel呢？這是本篇文章要探討的問題。
　　寫這篇文章的目的還在於最新webpack版本的一些操作方式已經變化、babel也在不斷更新，以往的一些資料或者教程已不適合。筆者對webpack最新版4.1.1下使用babel進行了探索，現將結果總結為本文，以下經測試通過可行，讀者可參考設定。
　　限於作者水平，如有錯誤之處實屬正常，誠邀指正！

文章用例

　　為更加清楚的進行闡述，本文使用一個案例，如下：
　　1、專案根目錄為webpack-test，當然這個名字可以隨意；
　　2、在專案根目錄下，有一個index.js檔案，程式碼如下：

　　3、index.js所引入的a.js檔案採用了ES6語法的箭頭函式，程式碼如下：

　　4、最終打包成dist目錄下的main.js檔案，同時dist目錄下有一個index.html檔案引入main.js的指令碼，index.html檔案內容如下：

一、安裝babel-loader、babel-core、babel-preset-env

　　這三個檔案都是必需的，但彼此的作用各不相同。
　　首先，babel-loader作為webpack的loader的一種，作用同其他loader一樣，實現對特定檔案型別的處理。

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解
JavaScript）。loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack的打包能力，對它們進行處理。

　　雖然webpack本身就能夠處理.js檔案，但無法對ES2015+的語法進行轉換，babel-loader的作用正是實現對使用了ES2015+語法的.js檔案進行處理。
　　要使用babel，首先要安裝babel-loader，命令列中定位到專案根目錄輸入以下指令進行安裝：

npm install -D babel-loader

　　筆者這裡安裝完成後顯示版本是[email protected]。
　　第二，babel-core的作用在於提供一系列api。這便是說，當webpack使用babel-loader處理檔案時，babel-loader實際上呼叫了babel-core的api，因此也必須安裝babel-core：

npm install -D babel-core

　　筆者安裝完成顯示版本為[email protected]。
　　第三，babel-preset-env的作用是告訴babel使用哪種轉碼規則進行檔案處理。事實上，babel有幾種規則都可以實現對ES6語法的轉碼，如babel-preset-es2015、babel-preset-latest、babel-preset-env，不過官方現已建議採用babel-preset-env，本文也將採用babel-preset-env，你可以通過官網瞭解幾種規則的區別。同樣在命令列中定位到專案根目錄，輸入以下指令進行安裝：
　　

npm install -D babel-preset-env

筆者安裝的版本是[email protected]。

二、配置babel 規則

　　上面僅僅是安裝了三個包，如果要使babel起作用，便需要配置babel規則。
　　第一種方式是通過package.json。在package.json檔案中增加一個“babel"屬性，該屬性是一個JSON物件，作用是設定專案中的babel轉碼規則和使用到的babel外掛，其基本格式如下：

"babel":{
  "presets": [],
  "plugins": []
}

　　”presets”屬性欄位設定轉碼規則，”plugins”屬性設定使用到的外掛。在本專案中只需將”babel”屬性 的”presets”:設定為[“env”]即可，如下所示：

"babel":{
  "presets": ["env"]
}

　　上面的設定告訴npm本專案將使用babel，並且使用bable-preset-env規則進行轉碼，即實現對ES2015+語法進行轉碼。
　　除此之外，還有第二種方式，即通過.babelrc檔案。在專案根目錄下新建.babelrc檔案，裡面只需輸入第一種方式中”babel”屬性的值即可：

{
  "presets": ["env"]
}

作用和第一種方式相同。

三、建立並配置webpack.config.js檔案

　　僅有上面仍然不能起作用，雖然上面已經配置好babel的規則，但webpack仍然不知道何時使用該規則，這便需要使用webpack.config.js檔案。
　　這個檔案的作用是對webpack打包的引數進行配置。我的第一篇關於webpack4.x的文章《webpack4.x開發環境配置》中已經提到，webpack4.x中webpack.config.js這樣的配置檔案不是必須的，但事實上，如果想要進行更加個性化的打包配置，仍然要使用該檔案。在根目錄下新建webpack.config.js檔案，在其中輸入：

module.exports={
    module:{
        rules:[
            {
                test: /\.js$/,
                 exclude: /node_modules/, 
                 loader: "babel-loader"
            }
        ]
    }

}

　　這就告訴webpack打包時，一旦匹配到.js檔案就使用babel-loader進行處理，如前文所述，babel-loader呼叫babel-core的api使用bable-preset-env的規則進行轉碼。這裡並沒有使用entry、output這樣的引數，這是webpack4.x有預設的入口和出口，本專案無須改變，因此便不必進行設定。

四、執行檢視結果

　　假使你已經在package.json檔案的"scripts"屬性下增加了"build"屬性，即

"build": "webpack --mode production --progress --display-modules --colors --display-reasons"

　　現在，在命令列定位到專案根目錄，執行

npm run build

　　這就相當於執行"build"屬性對應的指令碼。
　　現在，webpack開始進行打包，當打包完成後，用瀏覽器開啟dist目錄下的index.html檢視結果，可以發現彈出兩次彈窗

第一次是"hello world"，第二次是"2,3,4"。

　　這表明a.js中的arrowTest()函式成功執行，開啟main.js檢視打包後的程式碼，也可以發現箭頭函式部分的程式碼已經被轉換成ES5的語法，如下：

[1,2,3].map(function(r){return r+1})

　　這表明整個babel的配置及使用已經成功。

　　當然，以上只是最基本的配置和使用，如果要應對更加複雜的情況，只需要參照官方文件對相關引數進行修改，這並不是什麼難事，完！