如何实现一个webpack的loader(以babel-loader为例)

一. 搭建简易的 webpack 开发环境

1. 初始化
   在空目录下, 运行 yarn init -y
   在当前目录下新建一个名为 src 的目录, 在 src 下建一个 index.js 文件
   在当前目录新建一个 loader 目录, 手写的 loader 就放在这里面
2. 安装 webpack
   运行 yarn add webpack webpack-cli -D
   这里 webpack 版本是 4.33.0
   安装一个辅助的库, 用于获取配置 loader 传入的配置项
   yarn add loader-utils -D
3. 简单配置 webpack
   新建一个 webpack.config.js

const path = require('path')
module.exports = {
  mode: 'development',  
  entry: './src/index.js',
  output: {
    filename: 'build.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolveLoader: {
    modules: [
      'node_modules', path.resolve(__dirname, 'loader')
    ]
  },
} 

其中, resolveLoader 是 webpack 在运行过程中寻找 loader 的优先级, 这里表示先去 node_modules 目录下找, 如果找不到, 再去当前目录下的 loader 目录找

二. 在 webpack 中配置 babel-loader

const path = require('path')
module.exports = {
  // 其他配置
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env'
            ]
          }
        }
      }
    ]
  }
} 

@babel/preset-env 是常用的一个插件预设, 默认配置的情况下, 它跟 babel-preset-latest 是等同的 , 会加载从es2015开始的所有preset.

三. 编写 loader

在 loader 目录下, 新建一个 babel-loader.js
loader 是一个函数, 用于处理资源, 它的返回值就是处理好之后的资源

const babel = require('@babel/core')
const loaderUtils = require('loader-utils')

function loader(source) {
  let options = loaderUtils.getOptions(this)
  let cb = this.async()
  babel.transform(source, {
    // 传入 webpack 配置的 options
    ...options,
    // 开启 sourceMap
    sourceMap: true,
    filename: this.resourcePath.split('/').pop()
  }, function(err, result) {  
    // 第一个参数: error, node 的回调规范
    // 第二个参数: 编译后的代码
    // 第三个参数, sourse map
    cb(err, result.code, result.map)
  })
}

module.exports = loader

由于 @babel/core 编译代码的过程是异步的, 编译后的结果将会以回调的方式拿到

为了兼容这一异步的方式, 需要在函数的内部调用 this.async 函数, 表明这个过程是异步的, 然后用 this.async 执行后返回的回调函数, 将编译后的代码传递出去

更多其他 loader 是写法, 可以去看 这里