[英]Webpack with multiple roots and dynamic requires
I have webpack configured with two roots: 我有webpack配置有两个根:
resolve: {
root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ]
},
Module resolve works perfectly when I require a module by name require('moduleName')
. 当我需要名称
require('moduleName')
的模块时,模块解析工作完美。 It looks in siteName
folder and if it doesn't find the module there it looks in common
folder. 它在
siteName
文件夹中查找,如果找不到该模块,则查找common
文件夹。
When I try to require a module dynamically require('Pages/' + pageModuleName)
, webpack adds all files from siteName/Pages
to the bundle but it ignores files in common/Pages
folder. 当我尝试动态
require('Pages/' + pageModuleName)
模块require('Pages/' + pageModuleName)
,webpack会将siteName/Pages
中的所有文件添加到bundle中,但它会忽略common/Pages
文件夹中的文件。
I looked into require.context
but it doesn't really solve my problem as it ends up including all the files from both folders. 我查看了
require.context
但它并没有真正解决我的问题,因为它最终包括来自两个文件夹的所有文件。
var req = require.context('../', true, /\/(siteName|common)\/Pages/);
var page = req(pageModuleName);
To sum up, given a file structure like the following: 总而言之,给定如下文件结构:
common/Pages/PageA.js
common/Pages/PageB.js
siteName/Pages/PageA.js
When I do something like 当我做的事情
require('Pages/' + pageModuleName);
Is it possible for webpack to be configured in a way that will add just 是否有可能以一种方式, 只会增加配置的WebPack
siteName/Pages/PageA.js
common/Pages/PageB.js
to the bundle and "ignore" 捆绑并“忽略”
common/Pages/PageA.js
I don't think what you are trying to achieve. 我不认为你想要实现的目标。
When you 当你
resolve: {
root: [ path.resolve('./src/siteName'), path.resolve('./src/common') ]
},
It effectively teels webpack to use ./src/siteName/
and ./src/common
as root. 它有效地使webpack以root身份使用
./src/siteName/
和./src/common
。 So if you have /pages
in both directories, you end up have duplicate paths. 因此,如果两个目录中都有
/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
So you need to set it to 所以你需要将它设置为
resolve: {
root: [ path.resolve('./src') ]
},
I am a bit late but still this problem can be actual today :) 我有点晚了但是这个问题今天仍然可以实际:)
I was trying to find the answer myself. 我自己试图找到答案。 I guess there is no "pretty" solution but I can offer an "ugly" one that just works.
我想没有“漂亮”的解决方案,但我可以提供一个“丑陋”的解决方案。 And yes, you have to explicitly list all physical paths you want to use with
require.context
, because Webpack resolves each path only once and does not do it on each potential module. 是的,您必须明确列出要与
require.context
一起使用的所有物理路径,因为Webpack只解析每个路径一次,而不是在每个可能的模块上执行。 So if it finds a folder it just stops searching (obviously). 因此,如果它找到一个文件夹,它就会停止搜索(显然)。
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.