具有多个根和动态需求的 Webpack答案

【问题标题】：Webpack with multiple roots and dynamic requires具有多个根和动态需求的 Webpack
【发布时间】：2017-06-18 11:06:31
【问题描述】：

我为 webpack 配置了两个根：

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

当我需要一个名称为 require('moduleName') 的模块时，模块解析工作得很好。它在siteName 文件夹中查找，如果在其中找不到模块，它在common 文件夹中查找。

当我尝试动态地要求模块 require('Pages/' + pageModuleName) 时，webpack 会将 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

当我做类似的事情时

require('Pages/' + pageModuleName);

webpack 是否可以配置为添加just

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

到捆绑包并“忽略”

common/Pages/PageA.js

【问题讨论】：

标签： javascript webpack

【解决方案1】：

我不认为你想要达到什么目的。

当你

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

它有效地让 webpack 使用 ./src/siteName/ 和 ./src/common 作为 root。因此，如果您在两个目录中都有 /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') ]
},

【讨论】：

您介意详细说明一下吗？我不想创建两个捆绑包，我看不出这如何与两个配置一起使用。我的入口点位于common 文件夹中，这实际上是具有动态require 的文件/路由器。
@JohnNikolakis 哎呀……我误解了。但我不认为你想要做的事情可以实现。您可能需要考虑更改路线命名，或者从文件中执行要求并使用绝对路径。 github.com/webpack/webpack/issues/472

【解决方案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
});

【讨论】：