babel-loader JavaScript 编译器

我们来看下面的ES6及更高级的语法代码，我们用babel-loader官网7.4版本将代码打包成es5语法

class Person {
  constructor(name) {
    this.name = name
  }
}

let person = new Person('这是es6语法')
console.log(person)  //es6
——————————————————————————————
class Cat {
	name = 'tom'
	static color = 'yellow'
}
let c = new Cat()
console.dir('这是更高级的语法') //高级语法

1. 安装最新版本的包7.4

npm i babel-loader @babel/core @babel/preset-env webpack -D
//@babel/preset-env 包含的大多数的es6 预设语法
//@babel/core 语法核心

@babel/plugin-proposal-class-properties  
//若想支持更高级的语法，安装这个包（有很多），详情请看官网-插件

在webpack.config.js（默认情况）下的module.rules的数组中，添加如下代码

  module: {
	rules: [
    	//开始添加
    	{
		  test: /\.js$/,
		  use:{
		    loader: 'babel-loader',
		    options: {
		      presets: ['@babel/env'],
		      //plugins: ['@babel/plugin-proposal-class-properties'] 支持如上高级语法的例子 需要这样配置
		    },
        	exclude: 'node_modules' //除了node_modules安装包
		  }
		}
		//结束添加
	  ]
	}

再次用webpack打包后，我们来对比下结果

//不用babel转换的es6语法
class Person {\n  constructor(name) {\n    this.name = name\n  }\n}\n\nlet person = new Person('这是es6语法')\nconsole.log(person)

//用babel转换的es5语法
var Person = function Person(name) {\n  _classCallCheck(this, Person);\n\n  this.name = name;\n};\n\nvar person = new Person('这是es6语法');\nconsole.log(person);\n\n//# sourceURL=webpack:///./src/index.js?");

//不用babel转换的高级语法则报错 不能打包
//用babel转换的es5 高级语法
var Cat = function Cat() {\n  _classCallCheck(this, Cat);\n\n  _defineProperty(this, \"name\", 'tom');\n};\n\n_defineProperty(Cat, \"color\", 'yellow');\n\nvar c = new Cat();\nconsole.dir(c); //高级语法