webpack parse error when meets node's require.resolve

Question

I want to use typescript to write a webpack plugin. This plugin needs to add a loader dynamically which also written in typescript. Related code is as follow:

export class Plugin {
    apply(compiler: Compiler) {
        compiler.options.module.rules.unshift({
            resourceQuery: (query) => {
                if(!query) return false
                return /vue&type=template/.test(query)
            },
            loader: require.resolve('./loader'),
        })
    }
}```

however, the result of webpack build is like follow:

Plugin {\n apply(compiler) {\n compiler.options.module.rules.unshift({\n resourceQuery: (query) => {\n if (!query)\n return false;\n return /vue&type=template/.test(query);\n },\n loader: /require.resolve/(/*! ./loader */ "./src/loader.ts"),\n // use: {\n // loader: '@' + '/loader'\n // }\n });\n console.log(compiler.options.module.rules);\n }\n}\nexports.FesDesignPlugin = Plugin;\n\n\n//# sourceURL=webpack://fes-design-loader/./src/plugin.ts?");

It transform node's require.resolve into `require.resolve*/(/*! ./loader */ \"./src/loader.ts\")`. And when i use this plugin, it occurs an error of 'can't resolve module ./src/loader.ts


the resolution to resolve correctly the loader