具有多個根和動態的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
});