具有多个根和动态的Webpack需要

Question

我有webpack配置有两个根：

resolve: {
  root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ]
},

当我需要名称require('moduleName')的模块时，模块解析工作完美。 它在siteName文件夹中查找，如果找不到该模块，则查找common文件夹。

当我尝试动态require('Pages/' + pageModuleName)模块require('Pages/' + pageModuleName) ，webpack会将siteName/Pages中的所有文件添加到bundle中，但它会忽略common/Pages文件夹中的文件。

我查看了require.context但它并没有真正解决我的问题，因为它最终包括来自两个文件夹的所有文件。

var req = require.context('../', true, /\/(siteName|common)\/Pages/);
var page = req(pageModuleName);

---

总而言之，给定如下文件结构：

common/Pages/PageA.js
common/Pages/PageB.js
siteName/Pages/PageA.js

当我做的事情

require('Pages/' + pageModuleName);

是否有可能以一种方式， 只会增加配置的WebPack

siteName/Pages/PageA.js
common/Pages/PageB.js

捆绑并“忽略”

common/Pages/PageA.js

Answer 1

我不认为你想要实现的目标。

当你

resolve: {
  root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ]
},

它有效地使webpack以root身份使用./src/siteName/和./src/common 。 因此，如果两个目录中都有/pages ，那么最终会有重复的路径。

  //what you want                   // what webpack see
siteName/pages/PageA.js               pages/PageA.js
siteName/pages/PageB.js        =>     pages/PageB.js
common/pages/PageA.js                 pages/PageA.js
common/pages/PageB.js                 pages/PageB.js

所以你需要将它设置为

resolve: {
  root: [ path.resolve('./src') ]
},

Answer 2

我有点晚了但是这个问题今天仍然可以实际:)

我自己试图找到答案。 我想没有“漂亮”的解决方案，但我可以提供一个“丑陋”的解决方案。 是的，您必须明确列出要与require.context一起使用的所有物理路径，因为Webpack只解析每个路径一次，而不是在每个可能的模块上执行。 因此，如果它找到一个文件夹，它就会停止搜索（显然）。

function requireAll(req, cb) {
    // store moduleName => module mappings to prevent overriding
    let modules = {};
    if (!Array.isArray(req)) req = [req];
    // go trough each require.context
    for (let reqItem of req) {
        // go through each module
        for (let name of reqItem.keys()) {
            // skip module if it is already required
            if (modules.hasOwnProperty(name)) continue;
            // require module
            let module = reqItem(name);
            if (module.default) module = module.default;
            // callback
            if (cb) cb(module, name);
            // memorize module
            modules[name] = module;
        }
    }
    return modules;
}

requireAll([
    // require pririty is as follows
    require.context('path1/', true),
    require.context('path2/', true)
], (module, name) => {
    // whatever
});