Webpack学习系列 – Webpack5 怎么集成Babel ?

  • Webpack学习系列 – Webpack5 怎么集成Babel ?已关闭评论
  • 135 次浏览
  • A+
所属分类:Web前端
摘要

程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要:主要通过实操讲解运用Webpack 5 如何集成 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)学习结束,期待关注留言分享~~