Пользовательский плагин распознавателя веб-пакетов измените #meow на ./meow.js

Question

Я пытаюсь создать преобразователь веб-пакетов, который преобразует импорт для #meow в импорт ./meow.js.Ниже приведен базовый код, который показывает основной импорт #meow, и преобразователь должен преобразовывать все требуемые операторы в ./meow.js.

meow.js

module.export = 'meow';

main.js

import meow from '#meow';
console.log(meow);

Resolver.js

module.exports = class Resolver {
    apply(compiler) {
        compiler.hooks.module.tapPromise('Resolver', async (init, resolveContext) => {
            return compiler.doResolve(compiler.hooks.module, init, './meow.js', resolveContext, () => {});
        });
    }
}

Answer 1

Вот пример, который я получил, работая с веб-пакетом 4.

class Example {
    constructor() {
        this.name = 'Example';
    }
    apply(compiler) {
        compiler.hooks.resolve.tapPromise(this.name, async (init, context) => {
            const callback = () => {};
            if (init.request.match('#')) {
                init.request = './meow.js'
                return compiler.doResolve(compiler.hooks.resolve, init, null, context, callback)
            } else {
                return callback()
            }
        })
    }
}

module.exports = Example;

Answer 2

Я думаю, что лучше использовать NormalModuleReplacementPlugin для замены всех импортов, которые соответствуют некоторому правилу.

module.exports = function(env) {
  return {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/(.*)#meow(\.*)/, function(resource) {
      // do what ever mapping
        resource.request = resource.request.replace(/#meow/, `meow.js`);
      })
    ]
  };

};