一、babel介绍
在开发中我们经常使用ES6+，typescript等语法，但是在打包后，这些代码浏览器不能识别，所以此时我们使用babel来解决该问题。
babel定义：babel是一个工具链主要用于将ES6+语法兼容老版本的浏览器。
二、babel简单使用
babel是一个独立的工具，可以不在webpack中使用。
@babel/core：babel核心代码必须安装
@babel/cli:在命令行执行babel代码
npm install @babel/core @babel/cli -D

//需要转换的代码
['张三', '李四', '王五', '赵六'].forEach(item => console.log(item))
const username = "lizi"
const age = 20
console.log(username)
console.log(age)
//执行的命令
npx babel index.js --out-dir dist
//运行后的结果
['张三', '李四', '王五', '赵六'].forEach(item => console.log(item))
const username = "lizi"
const age = 20
console.log(username)
console.log(age)

从上面的例子来看，我们在运行babel代码时，不能将箭头函数转换为普通含函数。原因是需要安装一些插件。
1、@babel/plugin-transform-arrow-functions
2、@babel/plugin-transform-block-scoping
安装后使用

//需要转码的代码
['张三','李四','王五','赵六'].forEach(item => console.log(item))
//执行的命令
npx babel index.js --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions
//转化之后的代码
['张三', '李四', '王五', '赵六'].forEach(function (item) {
  return console.log(item);
});
转换之后将箭头函数转换成普通函数。

也可以设置预设模式，现在包@babel/preset-env

执行文件

//执行js文件
['张三', '李四', '王五', '赵六'].forEach(item => console.log(item))
const username = "lizi"
const age = 20
console.log(username)
console.log(age)
//执行脚本命令
npx babel index.js --out-dir dist --presets=@babel/preset-env
//执行后的文件
"use strict";

['张三', '李四', '王五', '赵六'].forEach(function (item) {
  return console.log(item);
});
var username = "lizi";
var age = 20;
console.log(username);
console.log(age);

如果想要在webpack中使用babel,则就需要使用babel-loader，这里我们需要下载babel-loader和@babel/core。

module.exports = {
   {
     test: /\.js$/,
     use: {
        loader: "babel-loader",
     }
  },
}

但是我们看打包后的代码，仍然存在ES6+语法，原因是:由于没有使用一些插件。

module.exports = {
	module:{
		 {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            plugins: [
              "@babel/plugin-transform-arrow-functions",
              "@babel/plugin-transform-block-scoping"
            ]
          }
        }
      },
	}
}

也可以使用预设

module.exports = {
 {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            // plugins: [
            //   "@babel/plugin-transform-arrow-functions",
            //   "@babel/plugin-transform-block-scoping"
            // ]
            presets:[
              "@babel/preset-env"
            ]
          }
        }
      },

}

可以直接新建一个babel.config.js文件，然后在里面设置babel文件。

//babel.config.js文件
module.exports = {
	presets:[
		"@babel/preset-env"
	]
}
//webpack.config.js
{
	test:/\.js$/,
	loader:"babel-loader"
}