Webpack中loader的使用场景

• 首先需要安装babel - loader以及@babel/core和@babel/preset - env。@babel/core是Babel的核心库，@babel/preset - env是一个智能预设，它能根据你配置的目标浏览器，自动确定需要转换哪些ES6/7语法。
• 使用以下命令安装：

  npm install babel - loader @babel/core @babel/preset - env --save - dev
  

• 在Webpack配置文件（一般是webpack.config.js）中，在module.rules数组中添加以下规则来处理.js文件：

  module.exports = {
           
  //...
  module: {
           
   rules: [
       {
           
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
           
               loader: 'babel - loader',
               options: {
           
                   presets: ['@babel/preset - env']
               }
           }
       }
   ]
  }
  //...
  };
  

• 这里的test: /\.js$/表示匹配所有的.js文件。exclude: /node_modules/是为了避免对node_modules目录下的代码进行转换，因为这些代码通常已经是经过处理的。use对象中指定了使用babel - loader，并且在options中设置了presets为['@babel/preset - env']，这就是告诉babel - loader使用@babel/preset - env预设来进行转换。

const add = (a, b) => a + b;
class Calculator {
       
constructor() {
       
   this.result = 0;
}
add(num) {
       
   this.result += num;
   return this.result;
}
}
const calculator = new Calculator();
console.log(calculator.add(add(2, 3)));

function add(a, b) {
       
return a + b;
}
function Calculator() {
       
this.result = 0;
}
Calculator.prototype.add = function (num) {
       
this.result += num;
return this.result;
};
var calculator = new Calculator();
console.log(calculator.add(add(2, 3)));