1. babel

    最流行的ES6到ES5转义器，这和它最早支持JSX语法相关
    使用babel时：babel-loader、babel-core、babel-preset-env
    loader让webpack能够处理那些非JavaScript文件(webpack自身只能理解JavaScript)
    loader可以将所有类型的文件转换为wabpack能够处理的有效模块，然后你就可以利用webpack的打包能力，对他们进行处理
    webpack 本身无法对ES2015+的语法进行转换，babel-loader的作用正是实现对使用ES2015+的语法的。js文件进行了处理
    babel-core作用在于提供一系列API。当webpack使用babel-core处理文件时，babel-loader实际上调用了babel-loader的api，因此也必须安装babel-core
    babel-present-env的作用是告诉babel使用哪种转码规则对文件进行处理。babel有几种规则都可以实现对ES6语法的转码，如babel-present-2015、babel-present-latest、babel-present-env，官方已建议采用babel-present-env
    例如：
    parsents：[
    [
    ‘babel/present-env’,
    {
    // 支持chrome 58+ 及 IE 11+
    targets: {
    chorme: ‘58’,
    id: ‘11’
    }
    }
    ]
    ]
    babel/present-env 会根据目标环境进行编译和打补丁。具体来讲，是根据参数targets 来确定目标环境，默认情况下它会编译为 ES2015，可以根据项目需求进行配置
    core-js 是实现JavaScript标准运行库之一，它提供了从ES1-ES7+ 以及还在提案阶段的JavaScript实现
    @babel/plugin-transform-runtime -重利用 Babel helper 方法的babel插件
    @babel/plugin-transform-runtime 是对Babel 编译过程中产生的helper方法进行重新利用(聚合)，以达到减少打包体积的目的。此外还有个作用是为了避免全局补丁污染，对打包多的bunler提供沙箱式的补丁
    @bael/polyfill 通过定制polyfill 和 regenerator，提供了一个ES2015+环境 polyfill的库，它是由于其它两个库实现的
    import ‘core-js/stable’;
    imort ‘regenerator-runtime/runtime’;
    如果引用了多个第三方库，并且它们存在公共的helper 方法，就应该引入@babel/plugin-transform-runtime, 目的是为了减少打包体积。
    注意：webpack只支持JS编译，而每个文件都需要经过loader进行转换，loader本质上是个函数，每个loader都会拿到上一个loader所处理的结果，并在当前的loader进行处理，然后并返回，传递给下一个loader

    1. Plugin

    plugin的作用是监听webpack的各个生命周期，在对应的生命周期内进行响应的处理
    原理：
    plugin是个类，需要提供一个apply方法，apply内接受complier对象，complier是webpack构建期间所生成的编译对象，可以通过监听complier.hooks.xxx.tap或者tapAsync，来实现插件，其中还有一个重要的对象compilation 而 compilation是webpak每次产生新的构建就会生成的一个对象，其中complier在整个构建期间就会生成的一个对象，而compilation会有多个。
    compiler和compilation继承于tapble，而tapable其实是类似于node的的eventEmitter的一个库，插件主要就是通过compiler或者compilation对webpack的构建周期进行处理的一种方式。