Webpack动态引入framework-{function}模块报错：无法找到framework-db

你遇到的问题核心是Webpack对动态require()语句的解析规则限制——虽然你写了require(framework-${name})，但Webpack在开发模式下的自动递归匹配并没有正确定位到node_modules里的framework-db模块。下面给你几个针对性的解决方案：

1. 用require.context明确扫描范围 #

Webpack的require.context可以帮你提前锁定要扫描的目录和模块规则，让Webpack打包时能精准识别所有符合framework-*规范的模块。修改你的代码如下：

// 在模块顶部创建上下文，路径根据项目结构调整，确保指向node_modules
const frameworkModulesContext = require.context(
  '../../node_modules/', 
  false, // 若framework模块都在node_modules根目录，无需递归子目录
  /^framework\-.*$/ // 匹配framework开头的模块名
);

init(name, options) {
  const moduleName = `framework-${name}`;
  // 检查上下文是否包含目标模块
  if (frameworkModulesContext.keys().includes(`./${moduleName}`)) {
    const pluginFactory = frameworkModulesContext(`./${moduleName}`);
    const plugin = pluginFactory(this, options);
    this.registerPlugin(name, plugin);
  } else {
    throw new Error(`Cannot find module ${moduleName}`);
  }
}

2. 配置Webpack的ContextReplacementPlugin #

在Webpack配置文件中添加该插件，明确告诉Webpack动态require的匹配范围，避免生成过于宽泛的递归规则：

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

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.ContextReplacementPlugin(
      /framework\-.*$/, // 匹配你动态引入的路径模式
      path.resolve(__dirname, 'node_modules'), // 指定扫描的根目录
      {
        include: [/framework-db/, /framework-cache/] // 可选，按需指定要包含的模块
      }
    )
  ]
};

3. 检查模块的入口配置 #

确认framework-db的package.json中main字段是否正确指向了入口文件（比如index.js）。如果这个字段配置错误，即使模块存在，Webpack也找不到可执行的代码。

4. 确认Webpack的模块解析规则 #

确保Webpack的resolve.modules配置包含node_modules，这是Webpack查找第三方模块的默认目录：

module.exports = {
  resolve: {
    modules: ['node_modules', path.resolve(__dirname, 'src')]
  }
};

优先尝试前两种方案，它们直接针对Webpack动态模块解析的特性调整，大概率能解决你的问题。

内容的提问来源于stack exchange，提问作者shankshera