配置方法：1、用導(dǎo)入的方法把ES6代碼放到打包的js代碼文件中；2、利用npm工具安裝babel-loader工具，語法“npm install -D babel-loader @babel/core @babel/preset-env”；3、創(chuàng)建babel工具的配置文件“.babelrc”并設(shè)定轉(zhuǎn)碼規(guī)則；4、在webpack.config.js文件中配置打包規(guī)則即可。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

萬惡的IE遺臭萬年仍然需要填坑

• ie標(biāo)準(zhǔn)對html/css甚至js的規(guī)范簡直相差甚遠(yuǎn)，所以，一般要解決的兼容問題很大一部分是為了解決ie的不兼容，雖然目前流行的ES6語法及規(guī)范將IE的考慮拋棄掉，默認(rèn)放棄對IE的治療，但是IE的兼容仍然是個(gè)問題！即使IE的使用率已經(jīng)不到1%的市場占比。
• 我們使用著舒服的ES6規(guī)范但是為IE又很頭疼怎么辦呢？Webpack開發(fā)了非常厲害的打包轉(zhuǎn)換功能：轉(zhuǎn)ES5！

隨便來個(gè)ES6代碼

• 就寫個(gè)let聲明和遍歷：

console.log("webpack 1"); let date = ["hello", "world", "this", "is", "es6", "code"];  ((theDate) => {     theDate.forEach(item => console.log(item)); })(date)

這是在Chrome瀏覽器里的結(jié)果

這是在火狐瀏覽器的結(jié)果：

這是ie11瀏覽器的結(jié)果：

完全不出意料哈！我們來轉(zhuǎn)一轉(zhuǎn)。

• 這里我們先做一個(gè)修改，用導(dǎo)入的辦法把ES6代碼挪到打包的js代碼文件中：
  原index.js:

console.log("webpack 1"); let fun = () => {     let date = ["hello", "world", "this", "is", "es6", "code"];     date.forEach(item => console.log(item)); } //fun() //結(jié)果依然剛才一樣 export default fun;//es6導(dǎo)出函數(shù)，es6模塊化知識

Can’t find @babel/core 問題

• 以前安裝打包需要的插件或者說是工具包：

npm install babel-core babel-loader babel-preset-es2015 --save-dev #因?yàn)槭情_發(fā)測試環(huán)境，就加了dev，各自根據(jù)需要更改保存參數(shù)

• 沒錯(cuò)，因?yàn)榘姹炯嫒輪栴}，最新的8.x版本babel-loader讀取babel-core發(fā)生了改變，因此我們要安裝對應(yīng)匹配的版本：

#webpack 4.x | babel-loader 8.x | babel 7.x 最新版本 npm install -D babel-loader @babel/core @babel/preset-env #webpack 4.x | babel-loader 7.x | babel 6.x 版本 npm install -D babel-loader@7 babel-core babel-preset-env webpack

• 我這里使用的是7.x版本：

• 創(chuàng)建babel工具的配置文件：.babelrc，設(shè)定轉(zhuǎn)碼規(guī)則

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

• webpack.config.js配置打包規(guī)則：

module: {     rules: [{         test: /.js$/,         use: 'babel-loader',         exclude: /node_modules/     }] }

• webpack執(zhí)行，生成test.html

• 瀏覽器的效果：

Chrome

IE

代碼成功在IE上運(yùn)行了

• 我們再看看打包轉(zhuǎn)換成的es5長啥樣

es6轉(zhuǎn)es5到此結(jié)束。

【