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

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

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

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

隨便來個ES6代碼

• 就寫個let聲明和遍歷：

console.log("webpack?1");
let?date?=?["hello",?"world",?"this",?"is",?"es6",?"code"];

((theDate)?=>?{
????theDate.forEach(item?=>?console.log(item));
})(date)

這是在Chrome瀏覽器里的結果

這是在火狐瀏覽器的結果：

這是ie11瀏覽器的結果：

完全不出意料哈！我們來轉一轉。

• 這里我們先做一個修改，用導入的辦法把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()?//結果依然剛才一樣
export?default?fun;//es6導出函數(shù)，es6模塊化知識

Can’t find @babel/core 問題

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

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

• 沒錯，因為版本兼容問題，最新的8.x版本babel-loader讀取babel-core發(fā)生了改變，因此我們要安裝對應匹配的版本：

#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，設定轉碼規(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上運行了

• 我們再看看打包轉換成的es5長啥樣

es6轉es5到此結束。

【相關推薦：javascript視頻教程、編程視頻】

以上是webpack怎么將es6轉成es5的模塊的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！