webpack 配置babel編譯

1. 安裝

npm i babel-loader @babel/core（babel資源中心庫） @babel/preset-env（babel預設） -D

2.webpack.config.js中配置

babel-loader 和 @babel/preset-env的關係類似於 postcss-loader 和 autoprefixer的關係

3.在packjson.js 文件的scripts中新增一條配置項

4.運行 npm run webpack

會編譯index.html中引入的文件

5.如果文件報錯了 需要在瀏覽器中查看源代碼

①需要添加source-map在webpack.config.js中

②運行 npm run webpack，執行結果如下，高級一點的瀏覽器都會支持source-map， 會生成一個跟bundle.js同級的文件

③瀏覽器中也會出現源碼的報錯