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同级的文件

③浏览器中也会出现源码的报错