Implementation of a simple Webpack loader

Record how to implement a simple Webpack loader while learning webpack

首先谈一下Loader 作用, 我的理解是可以将非js文件转换为 webpack 能识别的模块。Loader 在模块被添加到依赖图之前对其内容进行转换，实现预处理功能。

实现一个简单的loader

功能单一

Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。
所以如 less 文件转换成 css 文件，也不是一步到位，而是 less-loader, css-loader, style-loader 几个 loader 的链式调用才能完成转换。

本质是函数

一个 loader 其实就是一个 node 模块，这个模块导出的是一个函数：

language 复制代码

module.exports = function (source) {
  // source 为 compiler 传递给 Loader 的一个文件的原内容
  // 处理...
  return source // 需要返回处理后的内容
}

loader实现

比如我们打包时，想要替换源文件的字符串，这时可以考虑使用 Loader，一个简单的demo只作参考。

javascript 复制代码

//angular.js
export const msg1 = "Learning Angular is fun!";
//react.js
export const msg2 = "Learning React is fun!";
//vue.js
export const msg3 = "Learning Vue is fun!";

//index.js
import { msg1 } from './utils/angular';
import { msg2 } from './utils/react';
import { msg3 } from './utils/vue';

console.log(msg1);
console.log(msg2);
console.log(msg3);

src/loaders/replaceLoader.js

javascript 复制代码

module.exports = function (source) {
    try {
        const handleContent = source.replace('Vue', 'Vue framework')
            .replace('React', 'React framework')
            .replace('Angular', 'Angular framework');
        return handleContent;
    } catch (err) {
        this.callback(err);
    }
}

要做的事也很简单, 把 Vue,React,Angular后面都加上framework。一个非常简单的loader就完成了。

loader使用

在webpack.config.js配置我们写好的loader

javascript 复制代码

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: './src/loaders/replaceLoader.js',
            },
        ],
    }
}

执行npx webpack, 查看打包结果dist/main.js

我们的loader成功替换了字符串。
需要注意的是，use里面填写的 loader 是去node_modules目录里面找的，由于我们是自定义的 loader，所以不能直接写use: 'replaceLoader'，但直接写路径的方式未免难看点，我们可以通过 webpack 来配置：

javascript 复制代码

const path = require('path');

module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'replaceLoader',
            },
        ],
    },
    resolveLoader: {
        modules: ['node_modules', './src/loaders']
    },
}

我们为loader配置了一个自定义的目录，这样node_modules找不到，就去./src/loaders找。

获取 loader 的 options

我们常用的loader基本都支持参数配置，如何给我们的loader传参呢？

javascript 复制代码

module: {
    rules: [
        {
            test: /\.js$/,
            use: {
                loader: 'replaceLoader',
                options: {
                    params: 'replaceString',
                }
            }
        },
    ],
},

这个时候可以使用this.query (loader context)来获取，通过this.query.params就能拿到，这里需要注意的是，this 上下文是有用的，所以这个 loader 导出函数不能是箭头函数。
在新版webpack5+更推荐使用this.getOptions()获取配置参数，它支持支持 JSON Schema 验证。

this.callback()

上面都是返回原来内容转换后的内容，但有些场景下还需要返回其他东西比如 sourceMap

language 复制代码

// 告诉 Webpack 返回的结果
this.callback(
  err: Error | null,
  content: string | Buffer,
  sourceMap?: SourceMap,
  meta?: any
);

修改后的代码：

javascript 复制代码

module.exports = function (source) {
    try {
        const handleContent = source.replace('Vue', 'Vue framework')
            .replace('React', 'React framework')
            .replace('Angular', 'Angular framework');
        this.callback(null, handleContent);
    } catch (err) {
        this.callback(err);
    }
}

总结

我们实现了一个简单的字符串替换loader，包括了loader的实现，一些常见load context的使用以及 wepack.config中loader的配置。对于复杂的loader的实现我们更多的可能需要借助AST帮我们来实现。