05 webpack4.0学习笔记——配置文件_babel-loader使用

概述

        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的粉，所以就简单给大家介绍下啦