当使用 webpack 打包 JavaScript 项目时，很多开发者会选择使用 babel 来处理 ES6+ 语法和其他新特性。babel 可以将这些新特性转换成大多数浏览器和环境都支持的 JavaScript 代码。下面是详细的配置步骤：

1. 安装依赖：首先，我们需要安装 babel 相关的依赖。在命令行中执行以下命令：

scss
npm install --save-dev babel-loader @babel/core @babel/preset-env

• babel-loader 是一个 webpack 的 loader，用来处理 JavaScript 文件。
• @babel/core 是 babel 的核心库，用于将代码转换成 es5 的语法。
• @babel/preset-env 是一个预设，可以根据配置的 target 自动转换代码。

安装完成后，我们可以在项目的 package.json 文件中看到这些依赖被添加到了开发环境中。

2. 配置 webpack：在 webpack 配置文件中，我们需要添加一个处理 JavaScript 文件的 rule，并将其使用 babel-loader 处理。在 module.rules 中添加以下配置：

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

在上面的配置中，我们定义了一个 rule，用于处理所有的 .js 文件。exclude 选项用于排除 node_modules 中的代码。use 选项指定了使用的 loader，这里我们使用 babel-loader。在 options 中，我们可以指定传给 babel-loader 的参数，这里我们指定了使用 @babel/preset-env 来处理 JavaScript 代码。

3. 配置 babel：为了让 babel 知道如何处理代码，我们需要在项目根目录下创建一个 .babelrc 文件，用于配置 babel。在 .babelrc 文件中添加以下代码：

json
{
  "presets": ["@babel/preset-env"]
}

在上面的配置中，我们指定了一个 preset，即 @babel/preset-env，它包含了所有 es6+ 特性转换插件的预设。

现在，我们已经完成了 babel 和 webpack 的配置，webpack 将会使用 babel-loader 来处理 JavaScript 文件。如果需要更多的配置选项，可以参考 babel 官方文档。