在当今的前端领域中，ES6 已成为标配。然而，尽管许多现代浏览器已经支持 ES6 的大部分特性，但是为了让代码运行在更多的环境中，我们需要使用 Babel 将 ES6 转换为 ES5 语法。而 Webpack 则成为了前端项目中最受欢迎的模块打包工具之一。那么，在 Webpack 中，如何使用 Babel 来编译 ES6 呢？
本文将分为三个部分介绍如何在 Webpack 中的配置 Babel。首先我们需要安装相应的依赖，然后配置 Babel，最后将其集成到 Webpack 中。
第一步：安装依赖
首先，我们需要在项目中安装 babel-core、babel-loader 和 babel-preset-env 依赖。
npm install babel-core babel-loader babel-preset-env --save-dev
第二步：配置 Babel
接下来，在项目根目录下创建一个 .babelrc 文件。在其中配置 Babel 的 preset：
{
"presets": ["env"]
}这里我们使用了 babel-preset-env，它包含了所有 ES6、ES7 和 ES8 的语法特性，以及一些普遍使用的新 API（如 Promise、Object.assign、Array.from 等），并且会根据目标环境自动转换。
第三步：集成 Babel 至 Webpack
现在我们需要在 Webpack 中将 Babel 集成起来。在 webpack.config.js 文件中，做如下配置：
-- -------------------- ---- -------
-------------- - -
-- ----------
------ -----------------
-- ----------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- -----------------
---- ----------------
-
-
-
--这里通过 babel-loader 将 Babel 集成到 Webpack 当中，同时我们要确保不编译 node_modules 目录下的代码，以免影响构建性能。
到这里，我们就成功地将 Babel 集成到了 Webpack 中，可以使用 ES6 语法开发 Webpack 项目了。
示例代码
下面是一份示例代码，我们通过 Babel 编译了箭头函数和 Spread 运算符，同时使用了 webpack-dev-server 进行开发。
src/index.js
const arr = [1, 2, 3];
const newArr = [...arr, 4, 5];
const add = (a, b) => a + b;
console.log('newArr:', newArr);
console.log('1 + 2 =', add(1, 2));.babelrc
{
"presets": ["env"]
}webpack.config.js
-- -------------------- ---- -------
-------------- - -
-- ----------
------ -----------------
-- ----------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- -----------------
---- ----------------
-
-
--
---------- -
------------ ---------
----- ----
-
--请注意，在示例代码中，我们将 ES6 转换为 ES5 的部分并没有在代码中体现，这是因为这部分在 Webpack 构建项目时已经自动完成了。
结论
本文介绍了在 Webpack 中集成 Babel 编译 ES6 的方法。使用 Babel 可以让我们在代码编写上更加方便和自由，而通过集成到 Webpack 项目中，我们可以以更高效的方式构建前端项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676e8c7ee9a7045d0d6b29b0