webpack（8）babel的介绍和基本使用

babel的基本介绍

浏览器基本只能识别ES5语法，当比较高级的语法出现时，浏览器无法识别，需要打包工具先将代码编译成ES5语法，然后再在浏览器上运行。
webpack本身无法将高级语法转换，需要通过babel-loader来实现，babel就是JS代码的编译器，通过babel可以将ES6高级语法转换成浏览器可以识别的ES5语法。

babel的基本使用

1、下载相应的依赖，@babel/core时babel编译器的核心，@babel/preset-env是一个智能预设，能够根据目标环境自动启用需要的Babel插件。

npm install --save-dev @babel/core babel-loader @babel/preset-env

2、webpack 配置文件rules中加入babel-loader的使用，这里options中也可以使用预设，也可以单独起一个Babel的配置文件

{
    test: /\.js$/,//匹配js文件
      //排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量
      exclude: /node_modules/,
      use: {
          loader: 'babel-loader',
          // 这里可以在options中配置预设，
          // 也可以单独用babel.config.js文件配置，效果一样
          // options: {
          //     presets: ['@babel/preset-env']
          // }
      }
  }

3、单独起一个babel的配置文件，项目根目录新增babel.config.js文件，加入预设。

module.exports = {
    presets: ['@babel/preset-env']
}

没有使用Babel之前打包的sum.js文件有箭头函数。

使用Babel后打包的代码没有箭头函数：