Webpack 是一种模块化打包工具，可以将多个 JavaScript 文件打包成一个或多个文件，以便在浏览器中加载。Babel 是一种 JavaScript 编译器，可以将 ES6 语法转换成浏览器可以支持的 ES5 语法。

Webpack 和 Babel 的结合使用，可以实现将 ES6 语法转换成浏览器可以支持的 ES5 语法，并将多个 JavaScript 文件打包成一个或多个文件的功能。下面是使用 Webpack 和 Babel 的一些常见步骤：

安装 Webpack 和 Babel

在命令行中使用以下命令安装 Webpack 和 Babel：

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

创建 Webpack 配置文件

在项目根目录下创建一个名为 webpack.config.js 的文件，然后添加以下代码：

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};

上面的代码指定了入口文件（entry）、输出文件（output）以及如何处理 JavaScript 文件（module.rules）。其中使用 babel-loader 和 @babel/preset-env 来处理 JavaScript 文件。

创建 Babel 配置文件

在项目根目录下创建一个名为 .babelrc 的文件，然后添加以下代码：

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

上面的代码指定了使用 @babel/preset-env 来处理 JavaScript 文件。

创建 JavaScript 文件

在 src 目录下创建一个名为 index.js 的文件，然后添加以下代码：

const sum = (a, b) => {
  return a + b;
};
console.log(sum(1, 2));

上面的代码是一个使用 ES6 语法定义的函数。

执行打包命令

在命令行中使用以下命令来执行打包：

npx webpack --mode development

上面的命令会执行 Webpack 的打包操作，并将打包结果输出到 dist 目录下的 bundle.js 文件中。

执行完成后，可以在浏览器中打开 index.html 文件，并查看浏览器控制台的输出结果，应该可以看到 sum 函数的结果为 3。

Webpack 和 Babel 的结合使用可以帮助开发者在浏览器中使用 ES6 语法，提高开发效率和代码质量。