babel是為了把高階js語法轉為低版本語法，它跟webpack是兩個互不相關的工具，要想將它們關聯起來，需要借助到：1、@babel/core：babel的核心模組
2、babel-loader：把 babel 和 webpack 進行關聯的橋梁
3、@babel/preset-env：預設
// 安裝完之後去 rules 中進行配置},
exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
只是配置預設的話，只能把高版本js寫法轉為低版本寫法，但是對於高階api(例如：reduce、object.assign等)，是沒有辦法轉換的。想要轉換高階api，需要用到usebuiltins這個屬性，其屬性值有三個：
false：不需要轉譯（預設值）
entry：整體轉譯
usage：按需轉譯
// babel是處理js檔案的]]
},exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
報錯：說的是使用了usebuiltins需要依賴乙個包：core-js。安裝完之後再進行配置
]]
},exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
只是這樣配置雖然實現了能轉換高階api的功能，但是有乙個弊端：**中高階api使用多少次，就從core-js中引入多少次轉譯的模組，會造成**的冗餘。解決這個問題：使用@babel/plugin-transform-runtime外掛程式（是babel的外掛程式）和@babel/runtime
]]
, plugins:
[// babel需要的外掛程式
"@babel/plugin-transform-runtime"
,// 這個外掛程式可以實現一次匯入，多次使用，不再是使用多少次就匯入多少次，減少**冗餘]}
, exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
對 babel 的配置，除了可以直接配置在webapck.config.js中，還可以單獨建立乙個配置檔案.babelrc，將這些配置資訊寫在裡面即可
// .babelrc 配置檔案]]
,// babel 需要的外掛程式
"plugins":[
"@babel/plugin-transform-runtime"
// 避免重複引入，減少**冗餘
]}
// webpack.config.js 檔案
, exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
額外再介紹乙個外掛程式：@babel/plugin-proposal-class-properties這是外掛程式是用來處理識別class類的新語法的
class
person
constructor()
b =1;
// 這種新語法webpack是不識別的，需要安裝babel外掛程式 @babel/plugin-proposal-class-properties
}
// 用babel處理js檔案]]
, plugins:
[// babel需要的外掛程式
"@babel/plugin-transform-runtime"
,// 這個外掛程式可以實現一次引用，多次使用，不再是使用多少次就引用多少次
"@babel/plugin-proposal-class-properties"
,// 處理class類中的屬性]}
},exclude:
/node_modules/
// 不處理該資料夾下的js檔案
}
webpack配合babel使用
babel 是乙個 j ascript 編譯器，可以把es6的語法轉為相容瀏覽器的es5語法 babel中文官網 babel可以單獨使用，但是一般都是和webpack結合一起使用 1 babel loader babel core babel preset env 換語法 安裝依賴 已經在專案裡安裝...
webpack中的babel配置
webpage只能處理一部分es6的新語法，更高階的語法不能處理，需要借助第三方loader將高階語法轉換為低階語法 大部分時候用不上，但是如果需要在比較低階的瀏覽器執行時，就需要使用 1.安裝babel相關的包 第一套包 cnpm install babel core babel loader 7...
關於webpack中babel外掛程式的使用
webpack是不能解析es6語法的，需要用到外掛程式來轉化為es5和瀏覽器能識別的檔案 1.cnpm i babel core babel loader 7 babel plugin transform runtime d這裡我使用的cnpm指令安裝可以更快，盡量不要npm和cnpm指令混用，因為...