概述
babel-loader负责将ES6、ES7代码转换成浏览器可运行的ES5的代码，是现代前端工程化中比较重要的loader。接下来我们介绍babel-loader的基本使用和配置。
具体操作步骤
1、本文中使用的demo继续使用前一文章中的代码，webpack配置文件如下所示（没有新增任何代码，还是之前url-loader所用的配置代码）：
const path=require('path');
module.exports={
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development',
module:{
rules:[
{
test:/\.(png|jpg|gif)$/i,
use:[
{
loader:'url-loader',
options:{
limit:919200
}
}
]
}
]
}
};2、在上述代码的基础上，我们在input.js文件中增加一部分ES6的代码，用来测试babel-loader的使用，代码如下：
const good='hello';
import img1 from './img/01.png';
import img2 from './img/02.jpg';
//ES6中的语法 异步处理
async function sayHello(){
const result=await fetch('https://www.baidu.com');
console.log(result);
}
sayHello();
3、然后通过官网的命令来安装babel-loader，此处推荐安装新版本的babel-loader8+，如下图：
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
4、安装完成之后，我们在配置文件中暂时不增加babel-loader的配置，先进行打包，如下图：
如上图所示，此次打包完成之后，还是在进行url-loader的使用，此处还并没有使用babel-loader，打开打包结果文件，我们搜索input.js文件中的函数语句，还可以找到ES6的语句，比如await、async这些，如图：
5、接下来我们配置babel-loader，来使用babel-loader进行打包，配置文件代码如下：
const path=require('path');
module.exports={
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development',
module:{
rules:[
{
test:/\.(png|jpg|gif)$/i,
use:[
{
loader:'url-loader',
options:{
limit:919200
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
};如上代码所示，我们就是在rules属性下在新增了一条babel的规则而已，如图：
如上图中关于babel-loader的配置代码，test字段表示匹配js结尾的文件；exclude表示排除node_modules或bower_components这些文件夹；use下面的loader表示使用babel-loader；presets中的“@babel/preset-env”就是用来将ES6语法转换成浏览器能运行的ES5语法的。
6、我们再执行一次打包，然后打开结果文件，同样的搜索input.js文件中的ES6语句，此时发现结果文件中已经看不见await、async这类ES6的语句了，如图：
这样，我们就是用babel-loader来将ES6等语法写的程序代码打包转换成了浏览器可运行的ES5的语句代码，这也正是babel-loader这个loader的功能。
附加内容
上述内容介绍了如何使用babel-loader来把ES6等语法转换成ES5语法，在此部分我们简单介绍下如何让webpack也支持react语法，即如何让webpack能对react的jsx文件进行打包处理。
要想webpack能对react的jsx代码文件进行打包处理，我们需要安装“@babel/plugin-transform-react-jsx”这个插件，如图，通过命令“npm install @babel/plugin-transform-react-jsx --save-dev”来进行安装：
安装完成后，我们在配置文件中的babel-loader配置处，添加plugins属性，然后添加刚才安装的插件，代码如下：
const path=require('path');
module.exports={
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development',
module:{
rules:[
{
test:/\.(png|jpg|gif)$/i,
use:[
{
loader:'url-loader',
options:{
limit:919200
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-react-jsx']
}
}
}
]
}
};安装配置好插件之后，我们安装react和react-dom，如图：
安装完成之后，我们在目录下添加一个HelloReact.jsx文件，然后里面添加一些基础的react代码，如下：
import React,{Component} from 'react';
export default class HelloReact extends Component{
render(){
return(
<div>
<h1>Hello</h1>
</div>
)
}
}然后在input.js文件中将此react组件引入，如下：
import HelloReact from './HelloReact.jsx';
最后进行打包，如图：
通过上图可看见，当我们打包的时候出错了，主要是webpack不识别jsx这种代码写法所致，这到底是为什么，我们插件也安装了，然后也配置了插件，并且配置都是正确的啊。在这里呢，我们的配置文件中刚才留了一个小坑，如图所示，在之前的文件中，我们一直是匹配js的文件，正则表达式里并没有添加jsx的匹配，所以导致报错，那我们接下来添加jsx的匹配，然后重新打包就好了：
总结
本文主要介绍了babel-loader的基本使用，此loader是我们前端工程化中比较重要的一个loader，所以大家一定要学会使用。此外还介绍了支持react的jsx语法配置，因为博主是react的粉，所以就简单给大家介绍下啦
