如何优先从双目录查找JS模块？ES6+Webpack实现应用文件覆盖

问题1：能否在不同文件夹查找JS模块并优先加载指定目录？ #

完全可以！这种需求在做主题定制、多环境适配或者插件式架构时特别常见，具体实现分两种场景：

• Node.js原生环境：你可以调整module.paths数组，把需要优先加载的目录放在数组最前面，Node.js会按这个顺序搜索模块。不过这种方式全局生效，灵活性有限，项目里更推荐用打包工具来控制。
• 打包工具（如Webpack/Vite）：通过配置模块解析规则实现，这是项目中最常用的方式，既能全局设置优先级，也能针对单个模块做精准控制，灵活性拉满。

问题2：结合ES6模块与Webpack实现单个文件覆盖 #

针对你给出的目录结构，要让core/app.js里的import moduleB from "./moduleB"优先加载src/theme/moduleB.js，而非同目录的moduleB.js，这里给你两种实用方案：

方案1：精确别名替换（简单直接） #

如果确定theme目录下的moduleB.js一定存在，直接用Webpack的resolve.alias做精确匹配替换：

// webpack.config.js
const path = require('path');

module.exports = {
  // ...其他基础配置（entry、output等）
  resolve: {
    alias: {
      // 匹配app.js中导入的./moduleB，替换为theme目录下的文件
      './moduleB$': path.resolve(__dirname, 'src/theme/moduleB.js')
    }
  }
};

这种方式配置简单，适合单个文件的固定覆盖场景。

方案2：动态优先查找（容错性高） #

如果想实现「优先加载theme目录的文件，找不到则自动回退到core目录」，可以用Webpack的NormalModuleReplacementPlugin插件配合文件存在性检查：

// webpack.config.js
const webpack = require('webpack');
const path = require('path');
const fs = require('fs');

module.exports = {
  // ...其他基础配置
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      // 匹配core/app.js中导入的./moduleB路径
      /^\.\/moduleB$/,
      (resource) => {
        const themeModulePath = path.resolve(__dirname, 'src/theme/moduleB.js');
        // 如果theme目录下存在该文件，就替换加载路径
        if (fs.existsSync(themeModulePath)) {
          resource.request = themeModulePath;
        }
        // 不存在则保持原路径，加载core目录的moduleB
      }
    )
  ]
};

打包后运行app.js，你会发现console.log(moduleB)输出的就是theme/moduleB.js里的内容啦～

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