Webpack学习系列 - Webpack5 怎么集成Babel ?
2024-09-08 01:56:21
程序员优雅哥简介:十年程序员,呆过央企外企私企,做过前端后端架构。分享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)学习结束,期待关注留言分享~~
最新文章
- BZOJ2242 [SDOI2011]计算器
- PHP JSON
- SSTable 介绍(二)
- C#的正则表达式
- Atom插件安装及常用插件推荐
- Div自适应高度的方法
- zoj 2105 Lifting the Stone
- 配置dg出现的错误
- 【Python3】SMTP发送邮件
- Python使用re实现计算器
- Boost库
- 1003: A Bug
- 大数据之scala基本语法学习
- 在SSIS包中使用 Checkpoint从失败处重新启动包
- UVA12304 2D Geometry 110 in 1! 计算几何
- node &; grunt path处理相关
- c语言程序设计第4周编程练习(素数和)
- 1.2WEB API 跨域
- 【算法】单源最短路——Dijkstra
- eclipse新建servers时选中tomcat版本后next是灰色的解决