webpack globalobject（Webpack学习系列 – Webpack5 怎么集成Babel ？）

程序员优雅哥简介：十年程序员                ，呆过央企外企私企
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，做过前端后端架构                。分享vue 
  
  
  
  
  
  
  
、Java等前后端技术和架构
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
 。

本文摘要：主要通过实操讲解运用Webpack 5 如何集成 Babel

Babel 对于前端开发来说是不可缺少的一部分















，用于将 ES6 或更高版本语法编写的代码转换为向后兼容的 JavaScript 语法















。关于 Babel 的详细介绍  
  
  
  
  
  
  
  ，参考《Babel》一文  
  
  
  
  
  
  
  。本文详细介绍如何在 webpack 5 中集成 Babel 
  
  
  
  
  
  
  
 。

1 安装依赖

webpack 使用 loader 的方式集成 babel 
  
  
  
  
  
  
  
 ，安装 babel-loader 有关的依赖：

yarn add babel-loader @babel/core @babel/preset-env -D

2 添加 babel 配置文件

在根路径下创建 babel 的配置文件： babel.config.js

module.exports = { presets: [ @babel/preset-env ] }

上面仅配置了预设（智能预设


 


 


 


 


 


 


 


，可以编译 ES6 的语法）

3 修改 webpack 配置

修改 webpack.config.js 
 
 
 
 
 
 
 ，添加babel-loader来处理JS文件：

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

exclude 属性表示排除  
   
   
   
   
   
   
   
 ，及满足 exclude 正则表达式的文件不使用这个loader进行处理


 


 


 


 


 


 


 


。

4 测试运行

在配置babel-loader之前

 

 

 

 

 

 

 

，可以在打包后的 bundle.js 文件中看到箭头函数等 ES6 的语法 
 
 
 
 
 
 
 。配置后重新执行 yarn build 打包
 

 

 

 

 

 

 

 ，查看 bundle.js 文件                ，里面 ES6 的语法都转为了 ES5
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

，说明 babel 配置生效  
   
   
   
   
   
   
   
 。

今日优雅哥（youyacoder）学习结束














，期待关注留言分享~~