webpack基础(7).使用babel-loader

Webpack 自带加载 js模块 的功能，但是他只能做 js模块化 的打包，并不能转换 js 里面的代码，比如将 ES6 转换成 ES5。
有时候我们的代码还能运行，这纯靠浏览器的解析。如果浏览器版本比较低的话，运行的时候就会发生错误。
因此，我们写代码的时候是需要转化的，这个转换的工具，就是babel。babel 和 webpack 的结合，就需要一个 babel-loader。

一、babel-loader

1. 安装

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

babel-loader: 在 webpack 里面利用 babel 解析 ES6 的桥梁；
@babel/core: babel 的核心模块；
@babel/preset-env: babel预设，一组 babel 插件的组合，省的我们自己安装插件了。

2. webpack.config.js 配置
   将 babel-loader 添加到 module 里面

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
      use: {
        loader: 'babel-loader', // *引入babel-loader
        options: {
          presets: ['@babel/preset-env'] // *引入预设
        }
      }
    }
  ]
}

二、regeneratorRuntime

regeneratorRuntime是webpack打包生成的全局辅助函数，由babel生成，用于兼容 async/await 的语法。

1. 添加插件

# 这个包中包含了regeneratorRuntime，运行时需要 
npm install --save @babel/runtime
# 这个插件会在需要regeneratorRuntime的地方自动require导包，编译时需要
npm install --save-dev @babel/plugin-transform-runtime

更多参考这里
https://babeljs.io/docs/en/babel-plugin-transform-runtime

2. webpack.config.js
   设置loader的插件信息，在与loader同级的options.plugins里添加。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/, // *业务代码里面可能会引入node_modules外部js，这些js不需要babel-loader编译，因此需要排除掉
      use: {
        loader: 'babel-loader', // *引入babel-loader
        options: {
          presets: ['@babel/preset-env'], // *引入预设
          plugins: [
            [
              '@babel/plugin-transform-runtime' // *配置插件信息
            ]
          ]
        }
      }
    }
  ]
}