《Webpack5 核心原理与应用实践》学习笔记-> webpack的loader运行与调试

// 引入webpack
const webpack = require('webpack');
const MemoryFS = require('memory-fs');
module.exports = function () {
    // 使用项目中的配置
    const webpackConfig = require('../../webpack.config.js');
    // 测试环境配置
    const config = {
        mode: 'development',
        devtool: 'sourcemap',
        entry: `../main.js`,
        output: false
    }
    // 合并覆盖
    Object.assign(webpackConfig, config)
    // 获得webpack编译实例
    const compiler = webpack(config)
    // 将输出内容输出到内存中
    compiler.outputFileSystem = new MemoryFS()
    // 返回一个promise，最终结果在成功的回调中
    return new Promise((resolve, reject) => compiler.run((err, stats) => {
        if (err) reject(err)
        resolve(stats)
    }))
}

// 指向上面的文件
const compiler = require('./compiler.js');
describe('Loader', () => {
    test('Defaults', () => {
        return compiler()
            .then((stats) => {
                const [module] = stats.toJson().modules
                expect(module.source).toMatchSnapshot()
            })
            .catch((err) => err)
    })
})

// 手写一个构造函数，用来模拟 webpack 上下文，里面只需要模拟自己使用到的属性即可
function WebpackLoaderMock (options) {
    this.context = options.context || '';
    this.query = options.query;
    this.options = options.options || {};
    this.resource = options.resource;
    this._asyncCallback = options.async;
}
WebpackLoaderMock.prototype.async = function () {
    return this._asyncCallback;
};
function testTemplate(loader, testFn) {
    loader.call(new WebpackLoaderMock({
        async: function (err, source) {
            testFn(source);
        }
    }), '这里是输入loader解析的数据');
}
describe('macro', function () {
    it('should be parsed', function (done) {
        // 自己的 loader
        const loader = require('./loader.js');
        testTemplate(loader, function (output) {
            // 解析完成会进入这个回调函数，来判断结果是否ok
            assert.equal(output, '这里是正确解析结果');
            done();
        });
    });
});

module.exports = {
    module: {
        rules: [
            {
                test: /.less$/i,
                use: ["style-loader", "css-loader", "less-loader"],
            },
        ],
    },
};

/**
 * @param remainingRequest 当前 loader 之后的资源请求字符串
 * @param previousRequest 在执行当前 loader 之前经历过的 loader 列表
 * @param data 与 Loader 函数的 `data` 相同，用于传递需要在 Loader 传播的信息。
 */
function pitch(
    remainingRequest: string, previousRequest: string, data = {}
): void {
}

// webpack.config.js
const path = require('path');
module.exports = {
    mode: "development",
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "[name].js",
        clean: true
    },
    module: {
        rules: [{
            test: /.js$/,
            use: ['./src/loader/a-loader.js', './src/loader/b-loader.js', './src/loader/c-loader.js'], // 这里先后挂载了3个loader
        }]
    }
}

function loader(source, sourceMap, data) {
    console.log('==========> 这里是a-loader 的 loader，我是第六个执行的 <==========');
    console.log();
    this.callback(
        null,
        source,
        sourceMap,
        data
    );
}
loader.pitch = function (remainingRequest, previousRequest, data ) {
    console.log('==========> 这里是 a-loader 的 pitch，我是第一个执行的 <==========');
    console.log('remainingRequest', remainingRequest);
    console.log('previousRequest', previousRequest);
    console.log('data', data);
    console.log();
}
module.exports = loader

function loader(source, sourceMap, data) {
    console.log('==========> 这里是b-loader 的 loader，我是第五个执行的 <==========');
    console.log();
    this.callback(
        null,
        source,
        sourceMap,
        data
    );
}
loader.pitch = function (remainingRequest, previousRequest, data ) {
    console.log('==========> 这里是b-loader 的 pitch，我是第二个执行的 <==========');
    console.log('remainingRequest', remainingRequest);
    console.log('previousRequest', previousRequest);
    console.log('data', data);
    console.log();
}
module.exports = loader

function loader(source, sourceMap, data) {
    console.log('==========> 这里是c-loader 的 loader，我是第四个执行的 <==========');
    console.log();
    this.callback(
        null,
        source,
        sourceMap,
        data
    );
}
loader.pitch = function (remainingRequest, previousRequest, data ) {
    console.log('==========> 这里是c-loader 的 pitch，我是第三个执行的 <==========');
    console.log('remainingRequest', remainingRequest);
    console.log('previousRequest', previousRequest);
    console.log('data', data);
    console.log();
}
module.exports = loader