如何通过Webpack配置引入运行时动态加载的指定模块？

针对你提到的动态require(foo)场景（foo仅为"bar1"或"bar2"），无需手动在代码中添加显式require，可通过以下两种Webpack配置方式实现模块打包：

方法1：使用ContextReplacementPlugin精准控制上下文 #

Webpack的ContextReplacementPlugin可修改动态require的上下文解析规则，强制打包你指定的模块。假设bar1和bar2位于./src/modules/目录下，配置示例如下：

const webpack = require('webpack');

module.exports = {
  // 你的其他Webpack配置（如output、module等）
  plugins: [
    new webpack.ContextReplacementPlugin(
      // 匹配动态require对应的上下文目录
      /\.\/src\/modules/,
      // 指定仅包含bar1和bar2模块
      new RegExp('^(bar1|bar2)$')
    )
  ]
};

如果模块在其他路径（如node_modules），只需调整第一个正则表达式匹配对应的上下文范围即可。

方法2：通过entry直接添加模块 #

将bar1和bar2作为额外入口添加到配置中，Webpack会自动将它们打包进bundle：

module.exports = {
  // 把目标模块和主入口放在同一个entry数组中，合并打包到主bundle
  entry: ['./src/index.js', './src/modules/bar1.js', './src/modules/bar2.js'],
  // 你的其他Webpack配置
};

这种方式无需额外插件，配置更简洁，适合模块数量少的场景。

两种方法都能让运行时的require(foo)正常解析到对应的模块，无需修改业务代码。

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