webpack的Babel加载器

Babel

Babel的转译过程分为三个阶段: parsing, transforming, generating。babel只是转译新标准引入的语法，比如ES6的箭头函数转译成ES5的函数；而新标准引入的原生对象，部分原生对象新增的原型方法，新增API等(如Proxy, Set等)，这些babel是不会转译的，需要用户自行引用polyfill来解决。

Babel转译过程：
解析parsing：将代码字符串解析成抽象语法树
变换transforming：对抽象语法树进行转换操作
生成generating：根据变换后的抽象语法树再生成代码字符串

plugins

插件应用于babel的转译过程，尤其是第二阶段transforming，如果这个阶段不使用任何插件的话，babel会原样输出代码。我们主要关注第二阶段使用的插件，因为tranform插件会自动使用对应的词法插件，所以parsing阶段的插件不需要配置

presets预设

为了减少配置转译过程中使用的各类插件的麻烦，babel官方做了一些预设的插件集。
JS标准为例，babel提供了如下的一些preset:
es2015, es2016, es2017, env
es20xx的preset只转译该年份批准的标准，而env则代指最新的标准，包括lastest和es20xx。
另外，stage-0到stage-4的标准成型之前的各个阶段，实验版的presets

stage-0: 稻草人，只是一个想法，可能是babel插件
stage-1: 提案，初步尝试
stage-2: 初稿，完成初步规范
stage-3: 候选，完成规范和初步的浏览器实现
stage-4: 完成，将被添加到下一年度发布

babel-loader

用来处理ES6语法，将其编译成浏览器可以执行的js语法。

module.exports = {
  ...
  module: {
    rules: [{
      test: /\.jsx$/
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],//presets设置的就是当前js版本
          plugins: [require('@babel/plugin-transform-object-rest-spread')]//需要的插件
        }
      }
    }]
  }
};

options属性来给loader传递选项

babel-poyfill

polyfill会把ES2015+环境整体引入代码环境中，让你的代码可以直接使用新标准所引入的新原生对象。

要确保在入口处导入 polyfill，因为 polyfill代码需要在所有代码前先被调用

module.exports = {
  entry: ['babel-polyfill', './app/js']
};

babel-plugin-transform-runtime

babel-plugin-transform-runtime插件依赖babel-runtime, babel-plugin-transform-runtime插件是把js代码中使用的新原生对象和静态方法转换成对babel-runtime包的引用。

未完待续，继续学习继续补充哦~

参考文献
【JavaScript】深入理解Babel原理及其使用