前端开发工程化是现代Web开发中不可或缺的一部分，而Webpack作为一款强大的模块打包工具，其优秀的模块化能力对于前端开发者来说显得尤为重要。而随着ES6的逐渐普及，我们也需要一种能够将ES6代码转译成浏览器可执行ES5代码的工具。这时候，Babel就是我们最好的选择。
什么是Babel？
Babel是一款广泛应用于JavaScript编译和转译的工具。它可以将ES6或更高版本的JavaScript转换成具有向后兼容性的ES5代码，从而帮助开发者简化不同浏览器之间ES6语法不兼容的问题。Babel是一个开源的工具，它也是一个非常灵活的转码器，可以通过其前端API来改变内部的转码流程。而在Webpack中，我们可以使用Babel来对代码进行转译，从而使其可以被浏览器所执行。
首先，我们需要安装两个在Webpack中使用Babel所需要的依赖——babel-loader和@babel/core。
npm install --save-dev babel-loader @babel/core
接着，在Webpack的配置文件（通常是webpack.config.js）中，我们需要对Babel进行配置。
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- --------------
-
-
-
-
--在这段代码中，我们首先定义了一个规则（rule），这个规则是用来告诉Webpack关于如何使用Babel的。在这个规则中，我们定义了一个测试条件（test），它会匹配所有的.js文件。同时，我们也定义了一个排除条件（exclude），它会排除掉所有的node_modules中的代码，因为这些代码通常是已经被转译的代码，无需再使用Babel进行转译了。最后，我们还定义了使用什么loader来进行转译（use.loader）。
接着，我们需要在项目的根目录下创建一个.babelrc文件，用来配置Babel的转译规则。
{
"presets": ["@babel/preset-env"]
}在这个.babelrc文件中，我们定义了使用一个预设（preset）——@babel/preset-env来进行转译。这个预设是一个官方提供的预设，它包含了许多将ES6代码转译成ES5代码的规则。
示例代码
我们来看一下如何使用Babel将ES6代码转译成浏览器可执行的ES5代码。假设我们有一段使用了ES6语法的代码，如下所示：
const sum = (a, b) => a + b;
我们想要使用Babel将其转译成ES5代码。那么，在Webpack中的配置文件中，我们需要添加对Babel的配置。这段代码已经在前面的代码中展示过了，这里就不再赘述。
接着，我们需要在项目的根目录下创建一个.babelrc文件，用来配置Babel的转译规则。这个文件的内容已经在前面的代码中展示过了，这里就不再赘述。
最后，在命令行中执行Webpack的命令。
npx webpack
这时候，Webpack就会将我们的ES6代码转译成浏览器可执行的ES5代码了。最终生成的代码如下所示：
var sum = function sum(a, b) {
return a + b;
};这段代码就可以被浏览器所执行了。
总结
Babel是一款非常实用的工具，它可以帮助我们将ES6或更高版本的JavaScript代码转译成向后兼容的ES5代码。在Webpack中，我们可以借助Babel对代码进行转译，从而使其可以被不同版本的浏览器所执行。希望这篇文章对大家能够有所帮助，并能够理解在Webpack中使用Babel的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647a9f9a968c7c53b064fe36