前言
目前，ES6（ES2015）這樣的語(yǔ)法已經(jīng)得到很大規(guī)模的應(yīng)用掏觉，它具有更加簡(jiǎn)潔区端、功能更加強(qiáng)大的特點(diǎn)，實(shí)際項(xiàng)目中很可能會(huì)使用采用了ES6語(yǔ)法的模塊澳腹，但瀏覽器對(duì)于ES6語(yǔ)法的支持并不完善织盼。為了實(shí)現(xiàn)兼容，就需要使用轉(zhuǎn)換工具對(duì)ES6語(yǔ)法轉(zhuǎn)換為ES5語(yǔ)法酱塔，babel就是最常用的一個(gè)工具沥邻。那么在webpack中如何使用babel呢？這是本篇文章要探討的問(wèn)題羊娃。
寫(xiě)這篇文章的目的還在于最新webpack版本的一些操作方式已經(jīng)變化唐全、babel也在不斷更新，以往的一些資料或者教程已不適合。筆者對(duì)webpack最新版4.1.1下使用babel進(jìn)行了探索邮利，現(xiàn)將結(jié)果總結(jié)為本文弥雹，以下經(jīng)測(cè)試通過(guò)可行，讀者可參考設(shè)置延届。
限于作者水平剪勿，如有錯(cuò)誤之處實(shí)屬正常，誠(chéng)邀指正方庭！
文章用例
為更加清楚的進(jìn)行闡述厕吉，本文使用一個(gè)案例，如下：
1械念、項(xiàng)目根目錄為webpack-test头朱，當(dāng)然這個(gè)名字可以隨意；
2订讼、在項(xiàng)目根目錄下髓窜，有一個(gè)index.js文件，代碼如下：
3欺殿、index.js所引入的a.js文件采用了ES6語(yǔ)法的箭頭函數(shù)寄纵，代碼如下：
4、最終打包成dist目錄下的main.js文件脖苏，同時(shí)dist目錄下有一個(gè)index.html文件引入main.js的腳本程拭，index.html文件內(nèi)容如下：
一、安裝babel-loader棍潘、babel-core恃鞋、babel-preset-env
這三個(gè)文件都是必需的，但彼此的作用各不相同亦歉。
首先恤浪，babel-loader作為webpack的loader的一種，作用同其他loader一樣肴楷，實(shí)現(xiàn)對(duì)特定文件類型的處理水由。webpack官方文檔中指出了loader的作用，即：
loader 讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解
JavaScript）赛蔫。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊砂客，然后你就可以利用 webpack的打包能力，對(duì)它們進(jìn)行處理呵恢。
雖然webpack本身就能夠處理.js文件鞠值，但無(wú)法對(duì)ES2015+的語(yǔ)法進(jìn)行轉(zhuǎn)換，babel-loader的作用正是實(shí)現(xiàn)對(duì)使用了ES2015+語(yǔ)法的.js文件進(jìn)行處理渗钉。
要使用babel彤恶，首先要安裝babel-loader，命令行中定位到項(xiàng)目根目錄輸入以下指令進(jìn)行安裝：
npm install -D babel-loader
筆者這里安裝完成后顯示版本是babel-loader@7.1.4。
第二声离，babel-core的作用在于提供一系列api歇竟。這便是說(shuō)，當(dāng)webpack使用babel-loader處理文件時(shí)抵恋，babel-loader實(shí)際上調(diào)用了babel-core的api，因此也必須安裝babel-core：
npm install -D babel-core
筆者安裝完成顯示版本為babel-core@6.26.0宝磨。
第三弧关，babel-preset-env的作用是告訴babel使用哪種轉(zhuǎn)碼規(guī)則進(jìn)行文件處理。事實(shí)上唤锉，babel有幾種規(guī)則都可以實(shí)現(xiàn)對(duì)ES6語(yǔ)法的轉(zhuǎn)碼世囊，如babel-preset-es2015、babel-preset-latest窿祥、babel-preset-env株憾，不過(guò)官方現(xiàn)已建議采用babel-preset-env，本文也將采用babel-preset-env晒衩，你可以通過(guò)官網(wǎng)了解幾種規(guī)則的區(qū)別嗤瞎。同樣在命令行中定位到項(xiàng)目根目錄，輸入以下指令進(jìn)行安裝：
npm install -D babel-preset-env
筆者安裝的版本是babel-preset-env@1.6.1听系。
二贝奇、配置babel 規(guī)則
上面僅僅是安裝了三個(gè)包，如果要使babel起作用靠胜，便需要配置babel規(guī)則掉瞳。
第一種方式是通過(guò)package.json。在package.json文件中增加一個(gè)“babel"屬性浪漠，該屬性是一個(gè)JSON對(duì)象陕习，作用是設(shè)置項(xiàng)目中的babel轉(zhuǎn)碼規(guī)則和使用到的babel插件，其基本格式如下：
"babel":{
"presets": [],
"plugins": []
}
”presets”屬性字段設(shè)定轉(zhuǎn)碼規(guī)則址愿，”plugins”屬性設(shè)置使用到的插件该镣。在本項(xiàng)目中只需將”babel”屬性 的”presets”:設(shè)置為[“env”]即可，如下所示：
"babel":{
"presets": ["env"]
}
上面的設(shè)置告訴npm本項(xiàng)目將使用babel必盖，并且使用bable-preset-env規(guī)則進(jìn)行轉(zhuǎn)碼拌牲，即實(shí)現(xiàn)對(duì)ES2015+語(yǔ)法進(jìn)行轉(zhuǎn)碼。
除此之外歌粥，還有第二種方式塌忽，即通過(guò).babelrc文件。在項(xiàng)目根目錄下新建.babelrc文件失驶，里面只需輸入第一種方式中”babel”屬性的值即可：
{
"presets": ["env"]
}
作用和第一種方式相同土居。
三、建立并配置webpack.config.js文件
僅有上面仍然不能起作用，雖然上面已經(jīng)配置好babel的規(guī)則擦耀，但webpack仍然不知道何時(shí)使用該規(guī)則棉圈，這便需要使用webpack.config.js文件。
這個(gè)文件的作用是對(duì)webpack打包的參數(shù)進(jìn)行配置眷蜓。我的第一篇關(guān)于webpack4.x的文章《webpack4.x開(kāi)發(fā)環(huán)境配置》中已經(jīng)提到分瘾，webpack4.x中webpack.config.js這樣的配置文件不是必須的，但事實(shí)上吁系，如果想要進(jìn)行更加個(gè)性化的打包配置德召，仍然要使用該文件。在根目錄下新建webpack.config.js文件汽纤，在其中輸入：
module.exports={
module:{
rules:[
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
}
這就告訴webpack打包時(shí)上岗，一旦匹配到.js文件就使用babel-loader進(jìn)行處理，如前文所述蕴坪，babel-loader調(diào)用babel-core的api使用bable-preset-env的規(guī)則進(jìn)行轉(zhuǎn)碼肴掷。這里并沒(méi)有使用entry、output這樣的參數(shù)背传，這是webpack4.x有默認(rèn)的入口和出口呆瞻，本項(xiàng)目無(wú)須改變，因此便不必進(jìn)行設(shè)置续室。
四栋烤、運(yùn)行查看結(jié)果
假使你已經(jīng)在package.json文件的"scripts"屬性下增加了"build"屬性，即
"build": "webpack --mode production --progress --display-modules --colors --display-reasons"
現(xiàn)在挺狰，在命令行定位到項(xiàng)目根目錄明郭，執(zhí)行
npm run build
這就相當(dāng)于執(zhí)行"build"屬性對(duì)應(yīng)的腳本。
現(xiàn)在丰泊，webpack開(kāi)始進(jìn)行打包薯定，當(dāng)打包完成后，用瀏覽器打開(kāi)dist目錄下的index.html查看結(jié)果瞳购，可以發(fā)現(xiàn)彈出兩次彈窗
第一次是
"hello world"话侄，第二次是"2,3,4"。
這表明a.js中的arrowTest()函數(shù)成功執(zhí)行学赛，打開(kāi)main.js查看打包后的代碼年堆，也可以發(fā)現(xiàn)箭頭函數(shù)部分的代碼已經(jīng)被轉(zhuǎn)換成ES5的語(yǔ)法，如下：
[1,2,3].map(function(r){return r+1})
這表明整個(gè)babel的配置及使用已經(jīng)成功盏浇。
當(dāng)然变丧，以上只是最基本的配置和使用，如果要應(yīng)對(duì)更加復(fù)雜的情況绢掰，只需要參照官方文檔對(duì)相關(guān)參數(shù)進(jìn)行修改痒蓬，這并不是什么難事童擎，完！
