是否可以在 webpack 中创建自定义解析器? [英] Is it possible to create custom resolver in webpack?

问题描述

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

I have my own convention when require modules. E.g. require("./components/SettingsPanel"); should be resolved to require("./components/SettingsPanel/SettingsPanel.js");

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

Is there any way to create such resolver?

推荐答案

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

Yes, it's possible. To avoid ambiguity and for easier implementation, we'll use a prefix hash symbol as marker of your convention:

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

然后将此添加到您的配置文件中(当然，您可以稍后对其进行重构):

Then add this to your configuration file (of course, you can refactor it later):

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
      ]
    }
    // ...
};

这篇关于是否可以在 webpack 中创建自定义解析器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！