Babel-loader处理编译JS（es6,es7）高级语法

为什么安装Babel-loader

webpack只能处理部分的javascript高级语法，有一些高级语法的新特性，webpack处理不了
通过Babel，可以帮我们将高级语法转化为低级语法再交给webpack

官方文档 配置babel

webpack配置babel 官网地址，点击进入

安装步骤

• 安装相关包

npm install -D babel-loader @babel/core @babel/preset-env webpack

npm install -D @babel/plugin-transform-runtime @babel/runtime @babel/plugin-proposal-class-properties

• 配置webpack.config.js的rules

rules: [
  // the 'transform-runtime' plugin tells Babel to
  // require the runtime instead of inlining it.
  {
     
    test: /\.m?js$/, 
    exclude: /(node_modules|bower_components)/,  // 要排除node_modules文件夹，我们不需要再次给模块里面js进行编译，因为，都是别人编译好后发布的
    use: {
     
      loader: 'babel-loader', 
      options: {
     	// options选项里面配置的必须要写上
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-transform-runtime',"@babel/plugin-proposal-class-properties"]
      }
    }
  }
]

案例：

没有babel-loader

我们在没有安装bable-loader的情况下，使用es6语法的新特性

webpack.config.js的配置

运行，浏览器会报错

有babel-loader

webpack.config.js配置

运行成功