随着 Node.js 和浏览器技术的不断发展，越来越多的前端工程师开始使用 ES6 来编写 JavaScript 代码。但是，由于不同的浏览器对 ES6 的支持程度不同，因此需要使用相应的工具将 ES6 转换为 ES5。其中，Webpack 是最常用的打包工具之一，本文将介绍如何在 Webpack 中配置 babel，将 ES6 转换为 ES5。
什么是 babel？
babel 是一款 JavaScript 编译器，可以将高版本的 JavaScript 语法转换成低版本的 JavaScript 语法，从而在不同环境下运行。babel 支持的语法繁多，包括 ES6/7/8、JSX、Flow 等。
如何在 Webpack 中配置 babel？
要在 Webpack 中配置 babel，需要先安装相应的依赖包。具体步骤如下：
安装
babel-loader--- ------- ------------ ----------
安装
@babel/core--- ------- ----------- ----------
安装
@babel/preset-env--- ------- ----------------- ----------
在
webpack.config.js中进行相应配置，示例代码如下：-------------- - - ------- - ------ - - ----- -------- -------- --------------- -- -- ------------ -- ---- - ------- --------------- -------- - -------- --------------------- -- -- ---------- -- - - - - - -以上代码配置了一个规则，用来转换
.js文件。其中，test属性表示需要转换的文件类型，exclude属性表示要排除的文件夹，use.loader属性表示使用的 loader，use.options.presets表示使用的 preset 配置，这里使用的是@babel/preset-env，它可以根据目标环境自动转换语法。
示例代码
下面是一个简单的 ES6 代码示例：
----- --- - -- -- ------ ------- -------------------
使用 Webpack 和 babel 将其转换为 ES5 代码，示例代码如下：
---- -------- --- --- - -------- ----- - ------ ------ ------- -- -------------------
结论
以上就是在 Webpack 中配置 babel 将 ES6 转换为 ES5 的方法，通过以上步骤，可以帮助前端工程师尽可能兼容不同浏览器，提高代码的可移植性。当然，以上只是最基础的配置，babel 还有很多高级用法可以使用，需要根据具体情况进行调整。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672092c42e7021665e02df4b