1. 安装

npm i babel-loader @babel/core(babel资源中心库) @babel/preset-env(babel预设) -D

2.webpack.config.js中配置

webpack 配置babel编译

babel-loader 和 @babel/preset-env的关系类似于 postcss-loader 和 autoprefixer的关系

3.在packjson.js 文件的scripts中新增一条配置项

webpack 配置babel编译

4.运行 npm run webpack

会编译index.html中引入的文件

5.如果文件报错了 需要在浏览器中查看源代码

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

webpack 配置babel编译

②运行 npm run webpack,执行结果如下,高级一点的浏览器都会支持source-map, 会生成一个跟bundle.js同级的文件

webpack 配置babel编译

webpack 配置babel编译

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

webpack 配置babel编译

 

 

 

相关文章:

  • 2022-01-24
  • 2021-12-06
  • 2021-04-04
  • 2021-09-29
  • 2021-07-26
  • 2021-06-23
  • 2021-08-13
  • 2021-07-24
猜你喜欢
  • 2021-05-24
  • 2021-07-16
  • 2021-11-27
  • 2021-07-16
  • 2021-09-30
  • 2021-12-06
  • 2021-07-28
相关资源
相似解决方案