Webpack externals导致外部图标包被全量引入的问题求助

我有一个图标包（package A），在Webpack或Vite应用中单独使用时，只会引入被导入的图标，按需加载表现完全符合预期。但当该图标包在基于Webpack构建的package B中使用，且package B通过webpack-node-externals配置externals忽略所有依赖打包时，问题出现：使用package B的应用会全量导入package A中的每一个图标。

我尝试了library.type = 'module'、externalsPresets.web = true等多种配置，但均无效。据我理解，搭配externalsPresets.node = true使用externals会强制bundle使用require，这是问题根源，目前bundle里出现了这段导致全量引入的代码：

de=require("packageA");
...{icon: de.Info}...

推测正是这段代码导致最终应用加载了整个package A。

• 单独给package A配置externals规则
  不要让webpack-node-externals把package A直接纳入外部依赖，而是单独配置规则保留按需导入语法：

  const nodeExternals = require('webpack-node-externals');
  
  module.exports = {
    // 其他配置
    externals: [
      nodeExternals({
        allowlist: ['packageA'] // 排除packageA，不让node-externals处理它
      }),
      (context, request, callback) => {
        if (request.startsWith('packageA/')) {
          // 保留单个图标的外部依赖引用
          return callback(null, `commonjs ${request}`);
        }
        callback();
      }
    ],
    externalsPresets: {
      node: false // 关闭node预设，避免强制用require加载整个包
    }
  };
  

• 让package B输出ES模块
  修改package B的Webpack配置，输出ES模块以支持上层应用的Tree Shaking：

  module.exports = {
    output: {
      library: {
        type: 'module'
      },
      environment: {
        module: true
      }
    },
    experiments: {
      outputModule: true
    },
    externalsPresets: {
      web: true // 使用web预设替代node预设，适配ES模块场景
    }
  };
  

  同时要在package B的package.json中添加"type": "module"。

• 直接导入单个图标文件
  如果package A支持按路径单独导入图标（比如import Info from 'packageA/icons/Info'），在package B里改用这种方式导入，而非从package A根目录导入整个包的导出，这样即使Webpack处理externals，也只会引入单个图标文件。

• 修改webpack-node-externals配置
  禁用commonjs转化，强制保留ES模块语法：

  nodeExternals({
    commonjs: false,
    modulesDir: path.resolve(__dirname, '../node_modules'),
    allowlist: [/packageA/]
  })
  

内容的提问来源于stack exchange，提问作者Kamil Kaźmierczak