babel-loader 配置项目编译 ES6 语法 至 ES5 语法

前因

webpack 自身可以自动加载JS文件，就像加载JSON文件一样，无需任何 loader。可是，加载的JS文件会原样输出，即使JS文件里包含ES6+的代码，也不会做任何的转化。那么我们就需要Babel帮忙了，Babel 是一个 JavaScript 编译器，可以将 ES6+ 转化成 ES5。在Webpack里使用Babel，需要使用 babel-loader

依赖安装

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

• babel-loader: 在webpack里应用babel解析ES6的桥梁
• babel/core: babel核心模块
• babel/preset-env: babel预设，一组babel插件的集合

项目配置

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

按以上配置，如报错：Uncaught ReferenceError: regeneratorRuntime is not defined
点击以上地址查阅情况。