如何在 webpack.config.js 中添加 babel-loader 的配置

可以按照以下步骤在 webpack.config.js 中添加 babel-loader 的配置：

1. 在项目的根目录下找到 webpack.config.js 文件，如果没有则需要先创建一个。

2. 在 webpack.config.js 文件中找到 module.exports 对象，它是一个 JavaScript 对象，用于导出 webpack 的配置选项。

3. 在 module.exports 对象中添加一个名为 module 的属性，它的值是一个包含 loader 规则的数组。

4. 在 module.rules 数组中添加一个新的规则对象，用于匹配 JavaScript 文件。

5. 在该规则对象中添加一个 test 属性，它的值是一个正则表达式，用于匹配 JavaScript 文件的文件名后缀。

6. 在该规则对象中添加一个 loader 属性，它的值是一个字符串，表示要使用的 loader 的名称，这里是 babel-loader。

7. 在该规则对象中添加一个 options 属性，它的值是一个对象，用于配置 babel-loader 的选项，例如 presets 和 plugins。

下面是一个示例代码，用于添加 babel-loader 的配置：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

这个配置表示，对于所有以 .js 结尾的文件，使用 babel-loader 进行转换，并且使用 @babel/preset-env 这个 preset 进行转换。