是否可以在 webpack 中创建自定义解析器？答案

【问题标题】：Is it possible to create custom resolver in webpack?是否可以在 webpack 中创建自定义解析器？
【发布时间】：2015-01-19 14:04:52
【问题描述】：

当需要模块时，我有自己的约定。例如。 require("./components/SettingsPanel"); 应解析为 require("./components/SettingsPanel/SettingsPanel.js");

有没有办法创建这样的解析器？

【问题讨论】：

哇，完美，这正是我想要的！

标签： webpack

【解决方案1】：

是的，这是可能的。为避免歧义并更容易实现，我们将使用前缀哈希符号作为您的约定的标记：

require("#./components/SettingsPanel");

然后将这个添加到你的配置文件中（当然，你可以稍后重构它）：

var webpack = require('webpack');
var path = require('path');

var MyConventionResolver = {
  apply: function(resolver) {
    resolver.plugin('module', function(request, callback) {
      if (request.request[0] === '#') {
        var req = request.request.substr(1);
        var obj = {
          path: request.path,
          request: req + '/' + path.basename(req) + '.js',
          query: request.query,
          directory: request.directory
        };
        this.doResolve(['file'], obj, callback);
      }
      else {
        callback();
      }
    });
  }
};


module.exports = {
    resolve: {
      plugins: [
        MyConventionResolver
      ]
    }
    // ...
};

【讨论】：

另见：github.com/webpack/docs/wiki/list-of-plugins#resolverplugin 和 github.com/webpack/webpack/blob/master/lib/…
这似乎只处理没有相对路径的文件。一旦我删除 # 字符，路径就会被解释为相对路径，并且解析器被绕过。有没有什么办法可以截取相对路径并进行修改？
如上所述，# 字符仅用于此示例实现。您可以使用任何其他前缀字符或根本不使用前缀，但在后一种情况下，约定将应用于 all 所需的路径。
您能否提供有关 resolver.plugin 和 doResolve 接受哪些参数的文档的链接。我试过但找不到。这还不够：webpack.js.org/api/resolvers，我什至不确定这是不是同一件事。除了挖掘源代码之外，似乎没有关于如何制作这个东西的明确说明，这不是最快的做事方式。
@Marko 我也在搜索这个。但在那之前，您可以打印参数变量

【解决方案2】：

创建了一个更新的示例以使用 Webpack v4。 故意不使用 ES6 语法以实现向后兼容性。如果你愿意，你可以把它变成一个类。

您可以在https://github.com/webpack/enhanced-resolve 阅读有关解析器示例的更多信息。

感谢 Ricardo 提供原始答案。

var webpack = require('webpack');
var path = require('path');

function MyConventionResolver (source, target) {
    this.source = source || 'resolve';
    this.target = target || 'resolve';
}

MyConventionResolver.prototype.apply = function(resolver) {
    var target = resolver.ensureHook(this.target);
    resolver.getHook(this.source).tapAsync('MyConventionResolver', function(request, resolveContext, callback) {
        if (request.request[0] === '#') {
            var req = request.request.substr(1);
            var obj = Object.assign({}, request, {
                request: req + '/' + path.basename(req) + '.js',
            });
            return resolver.doResolve(target, obj, null, resolveContext, callback);
        }
        callback();
    });
}


// In your Webpack Config
module.exports = {
    ...
    resolve: {
        plugins: [new MyConventionResolver()]
    }
};

【讨论】：

仅供参考，webpack v4 only supports 的节点版本 support class syntax