#Webpack4 配置 Babel7 完整教程
##前言 很多前端开发者在使用Webpack时，会遇到需要使用Babel进行代码转译的情况。因此本篇文章将介绍如何在Webpack4中配置Babel7。
##为什么需要使用Babel 现在前端开发中，为了能在不同浏览器环境下展示相同的样式与交互效果，我们需要对代码进行转译，以保障代码在不同环境下的兼容性。而Babel就是一种常用的代码转译工具。
##Webpack和Babel的关系 Webpack作为前端工程化构建工具，能够将多个代码文件打包成一个文件，并将其注入到html中；而Babel则用于将ES6及以上语法转换为ES5及以下语法，从而确保代码在较低版本的浏览器中仍能够正常运行。
##Babel的安装 首先需要在项目中安装Babel及其插件。安装命令如下：
npm i -D @babel/core @babel/preset-env babel-loader
注：以上命令是安装Babel7版本的核心库、预设及Babel与Webpack对接的babel-loader。
##Babel的配置 在项目根目录下新建名为babel.config.json的文件，配置如下：
{
"presets": [
"@babel/preset-env"
]
}注：以上配置是使用最新的Babel预设转换ES6语法，如果想支持更多的特性（如ES7、ES8及JSX等），则需安装更多的插件，如：
npm i -D @babel/plugin-transform-react-jsx @babel/plugin-proposal-class-properties
并将配置修改如下：
-- -------------------- ---- -------
-
---------- -
-------------------
--
---------- -
------------------------------------
-----------------------------------------
-
-##Webpack的配置 在webpack.config.js中进行以下配置：
-- -------------------- ---- -------
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- --------------
-
-
-
-
-注：以上配置对.js文件使用babel-loader进行转换，exclude中为需要排除转换的文件。
##插件的使用 下面是一个使用Babel的示例代码，用于将ES6语法的类转换为ES5语法：
-- -------------------- ---- -------
----- ------ -
---- - ---
------------------
--------- - -----
-
--------
---------------- -- ---- -- -- -----------
-
-
----- ---- - --- ---------------
-------------使用Babel转换后的代码如下：
-- -------------------- ---- -------
---- --------
--- ------ - -------- -- -
-------- ------------ -
--------- - ---
--------- - -----
-
--- ------ - -----------------
------------ - -------- ------- -
---------------- -- ---- -- - - -----------
--
------ -------
----
--- ---- - --- ---------------
-------------##总结 以上就是Webpack4配置Babel7的完整教程，通过该教程，我们可以在Webpack中正常使用Babel，优化代码的可用性和兼容性，为我们的项目保驾护航。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e9d6b48841e9894b23820