在前端开发中，Webpack 是一款强大的模块打包工具，而 Babel 则是将现代 JavaScript 代码转换为兼容性更强的版本的核心工具之一。今天，我们将一起探索如何将 Babel 集成到 Webpack 中，让代码更高效、更通用！🚀

首先，确保你已经安装了 Node.js 和 npm。接着，在项目根目录下初始化一个新的 npm 项目：`npm init -y`。然后，我们需要安装 Webpack 及其核心依赖：`npm install webpack webpack-cli --save-dev`。这是搭建基础环境的第一步。

接下来，让我们集成 Babel。执行 `npm install @babel/core @babel/preset-env babel-loader --save-dev` 安装必要的 Babel 工具和 loader。之后，在项目根目录创建一个 `.babelrc` 文件，并添加以下

```json

{

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

}

```

最后，在 Webpack 的配置文件 `webpack.config.js` 中添加 Babel loader：

```javascript

module.exports = {

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: 'babel-loader'

}

}

]

}

};

```

完成以上步骤后，运行 `npx webpack`，你的项目就可以顺利使用 Babel 转译现代 JavaScript 代码啦！🎉