babel-loader 用来加载 js 代码并进行转译

配置 babel-loader

首先安装 babel 和 babel 的相关模块

powershell

yarn add @babel/core @babel/preset-env -D

@babel/core 是 babel 的核心模块，编译器，用来转译代码

@babel/preset-env 是 babel 转译代码的预设规则

然后设置加载 babel-loader 的方式

在文件根目录下新建一个文件夹 loaders 用来存放 babel-loader.js

设置加载 loader 的方式

Javascript

// webpack.config.js
module.exports = {
  resolveLoader: {
    modules:['node_modules',path.resolve('loaders')]
  },
  devtool: 'source-map', // 开启源码映射
  module:{
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options:{
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
}

设置在使用 loader 的时候先去 node_modules 目录下查找，然后再去 loaders 目录查找

实现 babel-loader

Javascript

// babel-loader.js
let babel = require('@babel/core')
let loaderUtils = require('loader-utils') // loader的工具库

function loader(source){ // this表示loader上下文; source表示源码
  let options = loaderUtils.getOptions(this) //获取loader的options
  let cb = this.async()
  babel.transform(source, { // 用babel转译源码
    ...options , // 展开对象
    sourceMap: true, // 源码映射，webpack同时配置devtool属性
    // 设置源码映射的文件名index.js
    filename: this.resourcePath.split('/').pop() 
    // this.resourcePath表示源码的绝对路径
    // "D:\document\loader-webpack\src\index.js"
  },function(err, result){// 异步回调导出转译结果
    cb(err, result.code, result.map)  
  }) 
}

module.exports = loader

let cb = this.async() 是 loader 的原生导出函数，如果是同步，那么loader中会自动调用这个函数，异步的话，需要自己手动调用

打包后的结果：实现了源码映射