webpack中babel（编译ES6）语法最新版本

        在babel中@babel/preset-env 主要的功能是依据项目经过 babel 编译构建后产生的代码所对应运行的目标平台。其中@babel/plugin-transform-*。这些插件的工作主要就是 babel 在处理代码的过程当中对于新的 ES 语法的转换。

    1     因为在babel7.4以后@babel/preset-env就被弃用了，所以写法也有所不同，最新的写法（亲测可用）在babelrc文件下配置

{
    "presets": [
        [
         "@babel/preset-env",
         {
             "useBuiltIns": "usage",
            //  "debug": true,
             
        // "corejs": { "version": 3, "proposals": true }
 
 
         }
        ]
       ],
       
       "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            // "absoluteRuntime": false,
            // "corejs": false,
            // "helpers": true,
            // "regenerator": true,
            // "useESModules": false,
            // "version": "7.0.0-beta.0"
            "corejs":3
          }
        ]
      ]
}

 在webpack.config.js中配置：

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

                }

            }

因为我也是刚开始学习webpack，可是B站上面的教学视频都是低版本的webpack，所以在此做个记录

 "useBuiltIns": "usage",的作用是按需引入，减少打包后文件的大小。

2   在配置的过程中还发现一个问题，就是现在babel的第三方依赖都是用ES6(如箭头函数)写的，这就导致打包后的文件中依然有es6语法，IE浏览器还是识别不了。

解决方法是在webpack.config.js文件中配置

这样就不会使用es6语法了。

3@babel/plugin-transform-runtime这个插件就是为了解决在babel打包的过程中会需要一些辅助函数它的作用就是把这些辅助函数集中到一起

避免 babel 编译的工具函数在每个模块里重复出现，减小库和工具包的体积；

要使用上述功能需要下载一些插件

cnpm i core-js -D

 cnpm i @babel/runtime @babel/runtime-corejs3 @babel/plugin-transform-runtime -D