webpack转化es6语法

1.安装babel

babel转换高语法到es5

babel-loader转换  @babel/core是核心模块 @babel/preset-env 高级语法转换成低级语法

yarn add babel-loader @babel/core @babel/preset-env -D

2.配置js

在配置规则前，es6语法打包，会直接是箭头函数

配置后，函数会使用var进行打包

//index.js 
//es6语法
let fn = () =>{
    console.log('log')
}

fn();


//webpack.config.js
     {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //用babel-loader 需要把es6转化未es5
            presets: ["@babel/preset-env"]
          }
        }

配置后，打包es7语法，会报错，提示安装@babel/plugin-proposal-class-properties插件

//es7语法
class A{ //new A() a = 1
    a = 1;
}
let a = new A()
conosle.log(a.a)    //1


//webpack.config.js
     {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //用babel-loader 需要把es6转化未es5
            presets: ["@babel/preset-env"], //大插件的集合
            plugins: ["@babel/plugin-proposal-class-properties"] //小插件
          }
        }
      }

es7加装饰类 @log

执行后会报错，提示 Support for the experimental syntax 'decorators-legacy' isn't currently enabled，然后找到bebal官网，配置如下：

//index.js
//es7语法
// @log 类的装饰器
@log
class A {
  //new A() a = 1
  a = 1;
}

let a = new A();
console.log(a.a, "a");

function log(target) {
  console.log(target, "1111");
}


//配置

     {
        test: /\.js$/,
        use: {
          loader: "babel-loader",
          options: {
            //用babel-loader 需要把es6转化未es5
            presets: ["@babel/preset-env"], //大插件的集合
            plugins: [//小插件
              ["@babel/plugin-proposal-decorators", { "legacy": true }],
              ["@babel/plugin-proposal-class-properties", { "loose" : true }]
            ] 
          }
        }
      }

执行后，结果如下：