2-7 webpack-使用babel-loader编译ES6语法

babel的用途

目前，ES6的语法已经得到了大规模的应用，它具有功能更加强大，更加简洁的特点。在实际项目中，我们可能采用了ES6语法的模块，但是浏览器对于ES6语法的支持并不完善，为了实现兼容，就需要使用转换工具，把ES6语法转换为ES5语法，babel就是最常用的一个工具。

babel转化语法需要的依赖项

1. babel-loader:负责ES6语法转换
2. babel-core：babel核心包
3. babel-preset-env：告诉babel使用哪种转码规则进行文件处理

使用babel-loader编译ES6语法具体步骤：

1.打开终端，进入到项目文件夹的路径，安装依赖。
输入命令：cnpm install babel-loader @babel/core @babel/preset-env --save-dev
2.配置webpack.config.js文件
在webpack.config.js里的module里的rules里写：

{
	test:/\.js$/,
	exclude:/node_modules/,
	use:'babel-loader'
},

注：exclude代表不在指定目录查找相关文件，我们这里不在node_modules里查找。
3.新建.babelrc文件配置转换规则
在项目根目录下创建.babelrc文件，在此文件中写：

{
	"presets":["@babel/preset-env"]
}

4.在终端输入npm run dev进行打包。
这个时候在index.js中写如ES6语法的代码，就会通过babel转化为ES5语法啦。
例如：我在index.js中写入：

import './index.scss';
import './css/bootstrap.min.css';
let a = 10;
console.log(a);

打包以后，bundle.js文件中就会显示：

注：另一种配置方式

不用创建.babelrc文件，在webpack.config.js中写配置：

{
	test:/\.js$/,
	exclude:/node_modules/,
	use:{
		loader:'babel-loader',
		options:{
			presets:["@babel/preset-env"]
				}
		}
},

然后在终端输入npm run dev进行打包，打包完成后的效果和第一种方法一样。