Webpack 作为一款先进的前端构建工具，可以将大量的模块打包成一个或多个 bundle，能有效地提高前端项目的开发和部署效率，但是它并不能完美地支持 ES6 及以上版本的语法，为了解决这个问题，我们可以使用 Babel 将我们的代码转换成浏览器能够识别的语法。
这篇文章将详细介绍在 Webpack 中如何搭配 Babel 使用，以及 Babel 可以如何帮助开发者更好地开发现代化的 Web 应用。
安装 Babel
在开始使用 Babel 之前，我们需要先安装 Babel 和它的插件，可以通过 npm 命令来安装：
npm install babel-loader @babel/core @babel/preset-env --save-dev
- babel-loader：Babel 在 Webpack 中的载入器，用于将 ES6 等代码转换为 ES5 等浏览器能够支持的语法。
- @babel/core：Babel 的核心工具，包含了 Babel 的编译核心和一些工具类函数。
- @babel/preset-env：Babel 的一个预设，可以根据配置的浏览器兼容性以及所使用的 JavaScript 特性，自动地生成插件列表。
配置 Webpack
在安装完 Babel 后，我们需要在 Webpack 配置文件中引入 babel-loader，并配置好其转换规则。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-其中，test 表示要处理的文件类型，本例子是所有的 .js 文件；exclude 表示不需要处理的文件夹，node_modules 则是常见的不需要处理的文件夹之一；loader 表示使用哪个 loader，我们使用的是 babel-loader；options 则是配置选项，我们将 @babel/preset-env 作为 preset。
配置 Babel
在 Webpack 中的 Babel 配置主要通过 @babel/preset-env 来完成，当然也可以自行配置其他的插件选项，根据自己的需求自由选择即可。
现在我们已经安装好了 @babel/preset-env，请在 .babelrc 文件中添加以下代码：
{
"presets": ["@babel/preset-env"]
}但为了更好地控制编译过程，我们也可以在 Webpack 配置文件中直接配置 Babel，在上述 Webpack 的基础上，我们做出如下修改：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- -
-
--------------------
-
------------ --------
------- -
-
-
-
-
-
-
-
-
-在 Babel 中，useBuiltIns 表示使用哪些 polyfill，corejs 则是指定使用哪一个版本的 core-js。
示例代码
下面我们来举一个例子：
const foo = () => console.log("Hello, world!");
foo();这是一个非常简单的 ES6 代码，在 Webpack 中，它将被转换成 ES5 代码：
"use strict";
var foo = function foo() {
return console.log("Hello, world!");
};
foo();可以看到，我们的 ES6 代码已经被转换成 ES5 代码。这样就可以兼容更多的浏览器环境了。
总结
现代的 Web 应用充满了活力和创意，我们需要一些高效的构建工具来帮助我们快速地开发和部署应用程序。Webpack 和 Babel 是当前非常流行和先进的构建工具和转码器，它们能够帮助我们解决 ES6 语法的兼容性问题。
在本文中，我们详细介绍了如何在 Webpack 中搭配 Babel 使用，并给出了实际的示例代码。相信这篇文章可以帮助读者更好地掌握前端技术，并且能够发挥 Babel 在前端开发中的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646c7a87968c7c53b0b72b7c