Question

我正在尝试创建一个Webpack解析器，它将Apple的导入转换为#meow的导入。我下面有一些基本代码，这些代码显示了主要导入./meow.js，而解析程序应将所有require语句转换为#meow。

meow.js

./meow.js

main.js

module.export = 'meow';

Resolver.js

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

Answer 1

我认为最好使用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`);
      })
    ]
  };

};

Answer 2

这是我使用webpack 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;

自定义Webpack解析器插件将#meow更改为./meow.js

2 个答案: