如何在 webpack 中配置 Babel？
Babel 是一个强大的 JavaScript 编译器，可以将 ES6/ES7/ES8 语法转换成浏览器可识别的 ES5，从而允许我们使用最新的 JavaScript 特性来编写代码并忽略浏览器的兼容性问题。在现代的 Web 开发中，Babel 已经成为了一个不可替代的工具。
Webpack 是一个现代化的 JavaScript 应用程序打包器，它将多个 JavaScript 文件进行打包，从而减少网络请求的次数和数据的传输量。在前端开发中，Webpack 的使用率非常高，所以如何在 Webpack 中配置 Babel 也变得尤为重要。
今天我们就来详细讲解如何在 Webpack 中配置 Babel。
第一步：安装依赖
首先，我们需要在项目中安装必要的依赖。
打开终端，在项目根目录下输入以下命令：
npm install --save-dev babel-loader @babel/core @babel/preset-env webpack
- babel-loader：Babel Webpack 加载器
- @babel/core：Babel 核心库
- @babel/preset-env：包含转换 es2015、es2016 和 es2017 等最新的 ES 特性，同时还包括一些新的语法和库特性的转换，例如 async/await 和更多新的数据类型。
- webpack：Webpack 命令行工具
第二步：配置 webpack.config.js
然后在项目根目录中新建一个 webpack.config.js 文件，这个文件是 Webpack 的配置文件，我们需要在这个文件中配置 Babel 并将其与 Webpack 整合起来。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--这里我们主要关注 module.rules 代码块中的规则配置，其中：
- test：匹配文件类型，此处匹配所有以 .js 结尾的文件
- exclude：不使用规则的路径，此处排除 node_modules 文件夹
- use：使用的 loader，此处使用 babel-loader
- options：使用的 loader 的选项，此处使用 @babel/preset-env
这样 Babel 就和 Webpack 整合起来了。
第三步：配置 .babelrc
再来，我们需要在项目根目录下新建一个 .babelrc 文件，这个文件是 Babel 的配置文件，我们需要在这个文件中配置 Babel 的插件和预设。
{
"presets": ["@babel/preset-env"]
}这里我们只使用 @babel/preset-env 这一个预设，但是实际上 Babel 还提供了很多其他的插件和预设，可以根据需求自行配置。
第四步：创建项目
现在，我们已经按照上述步骤正常配置了我们的 Webpack 和 Babel，为了查看是否正确配置完成，我们还需要创建一些文件来检验。
在项目根目录下新建一个 index.js 文件，并写入以下 ES6 代码：
const arr = [1, 2, 3]; arr.forEach(item => console.log(item));
这里使用了 ES6 中的箭头函数和数组的新特性。
在终端中输入以下命令，启动 Webpack：
npx webpack
然后在项目根目录下的 dist 文件夹中可以发现生成了一个 bundle.js 文件，打开这个文件并查看源代码：
var arr = [1, 2, 3];
arr.forEach(function (item) {
return console.log(item);
});我们可以看到，原本的 ES6 代码已经被 Babel 转换成了可在浏览器中运行的 ES5 代码。
总结
到这里，我们就详细讲解了如何在 Webpack 中配置 Babel 的过程，通过这个过程，我们可以更加灵活地使用 JavaScript 的最新特性。
除此之外，我们还可以使用 Babel 配置 JSX 或者 TypeScript 等其他的语言，从而更加规范化和高效化地完成前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64afb70348841e9894bd6fac