Question

我的webpack配置了两个根：

POST test/_search?search_type=count
{
"aggs" : {
    "sel" : {
        "filter" : {
            "query": {
                "query_string": {
                   "query": "sel",
                   "fields": [
                      "titre"
                   ]
                }
            }
        },
            "aggs" : {
                "minprice": {
                    "top_hits": {
                        "sort": [
                            {
                                "prix en €/kg": {
                                    "order": "asc"
                                }
                            }
                        ],
                        "size" : 1
                    }
                }
            }
        },
        "haricots" : {
        "filter" : {
            "query": {
                "query_string": {
                   "query": "haricot",
                   "fields": [
                      "titre"
                   ]
                }
            }

    },
            "aggs" : {
                "minprice": {
                    "top_hits": {
                        "sort": [
                            {
                                "prix en €/kg": {
                                    "order": "asc"
                                }
                            }
                        ],
                        "size" : 1
                    }
                }
            }
        }
    }
}

当我需要名称为resolve: { root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ] },的模块时，模块解析工作正常。它会在require('moduleName')文件夹中查找，如果它找不到该模块，则会在siteName文件夹中查找。

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

我调查了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

是否可以通过添加

的方式配置webpack

require('Pages/' + pageModuleName);

到捆绑包＆＃34;忽略＆＃34;

siteName/Pages/PageA.js
common/Pages/PageB.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

我有点迟了但今天仍然存在这个问题：）

我试图自己找到答案。我想没有＆＃34;漂亮＆＃34;解决方案，但我可以提供一个＆＃34;丑陋＆＃34;一个正常的。是的，您必须明确列出要与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
});

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

2 个答案: