webpack怎么將es6轉成es5的模塊

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

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用

本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

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

• ie標準對html/css甚至js的規范簡直相差甚遠，所以，一般要解決的兼容問題很大一部分是為了解決ie的不兼容，雖然目前流行的ES6語法及規范將IE的考慮拋棄掉，默認放棄對IE的治療，但是IE的兼容仍然是個問題！即使IE的使用率已經不到1%的市場占比。
• 我們使用著舒服的ES6規范但是為IE又很頭疼怎么辦呢？Webpack開發了非常厲害的打包轉換功能：轉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導出函數，es6模塊化知識

Can’t find @babel/core 問題

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

npm install babel-core babel-loader babel-preset-es2015 --save-dev #因為是開發測試環境，就加了dev，各自根據需要更改保存參數

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

#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版本：

• 創建babel工具的配置文件：.babelrc，設定轉碼規則

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

• webpack.config.js配置打包規則：

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

• webpack執行，生成test.html

• 瀏覽器的效果：

Chrome

IE

代碼成功在IE上運行了

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

es6轉es5到此結束。

【