根据具体情况指定 webpack “mainFields”答案

【问题标题】：Specify the webpack "mainFields" on a case by case basis根据具体情况指定 webpack “mainFields”
【发布时间】：2019-12-01 09:58:05
【问题描述】：

Webpack 有一个resolve.mainFields 配置：https://webpack.js.org/configuration/resolve/#resolvemainfields

这允许控制应将哪个 package.json 字段用作入口点。

我有一个应用程序可以引入几十个不同的 3rd 方包。用例是我想根据包的名称指定要使用的字段。示例：

对于包foo，使用node_modules/foo/package.json 中的main 字段
对于包bar，使用node_modules/bar/package.json 中的module 字段

我依赖的某些包没有以正确的方式捆绑，module 字段指向的代码不遵循以下规则：https://github.com/dherman/defense-of-dot-js/blob/master/proposal.md 如果我批发更改 webpack，这会导致应用程序崩溃配置为：

resolve: {
  mainFields: ['module']
}

mainFields 必须设置为 main 才能使应用程序当前运行。这导致它总是拉入每个依赖项的 CommonJS 版本并错过 treeshaking。希望做这样的事情：

resolve: {
   foo: {
     mainFields: ['main']
   },
   bar: {
     mainFields: ['module'],
}

包foo 通过它的main 字段捆绑到我的应用程序中，包bar 通过它的module 字段捆绑到我的应用程序中。我意识到使用 bar 包进行 treeshaking 的好处，并且我不会使用 foo 包破坏应用程序（具有不正确的模块语法的模块字段）。

【问题讨论】：

你有哪个包需要哪个入口点的列表/配置吗？那是你可以创造的东西吗？

标签： performance webpack webpack-4 tree-shaking

【解决方案1】：

实现此目的的一种方法是不使用resolve.mainFields，您可以使用resolve.plugins 选项并编写自己的自定义解析器，请参阅https://stackoverflow.com/a/29859165/6455628，因为通过使用自定义解析器，您可以以编程方式为不同模块解析不同的路径

我在这里复制粘贴Ricardo Stuven's 答案

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

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

【讨论】：