Question

我想动态地需要40多个json转换文件，例如：

require(`./assets/locales/${lang}.json`)

由于webpack在编译时无法确定路径，因此它将加载目录中的每个文件（如here所述）。我不想webpack将这些文件捆绑在.js输出中，所以我添加了一个externals配置，如下所示：

externals: [ 
    /assets\/locales\/.*\.json/i, 
    /assets\/locales\//i
],

问题是webpack不会考虑具有动态需求的externals配置。它可以满足非动态需求，例如：

require(`./assets/locales/en-us.json`)
require(`./assets/locales/pt-pt.json`)

但是我不想在我的代码中添加40条以上的代码……我希望将所有这些.json文件作为外部依赖项，并能够动态地要求它们。

有没有办法实现我想要的？我调查了ContextReplacementPlugin，但在这种情况下似乎没有帮助。如果我使用IgnorePlugin，则无法加载json文件。

谢谢！

Answer 1

您可以像这样使用require.context：

require.context('./assets/locales/', false, /\.json$/);

您可以使用require.context（）函数创建自己的上下文。

它允许您传递目录进行搜索，其中的标志指示   是否也应该搜索子目录以及常规   表达式来匹配文件。

webpack在构建时解析代码中的require.context（）。

如果您更喜欢节点，则可以使用package。让我知道它是否有效。：）

Answer 2

解决了！当webpack找到带有表达式的require时，它将前进到import all files in the directory。在这种情况下，webpack不能将externals与字符串或正则表达式匹配。但是，如果我们在externals定义中使用一个函数，它确实可以工作。

结果是这样的：

externals: [
    function (context, request, callback) {
        if (/assets\/locales$/i.test(context)) {
            return callback(null, './assets/locales/' + request);
        }
        callback();
    }
]

我可能有一个更好的解决方案，也许这是一个webpack的错误...如果有人有更好的主意，我愿意接受它。

如何添加动态需求作为外部？

2 个答案: