如何将动态需求添加为外部？答案

【问题标题】：How to add dynamic requires as external?如何将动态需求添加为外部？
【发布时间】：2018-10-04 19:09:48
【问题描述】：

我有 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文件。

谢谢！

【问题讨论】：

标签： webpack webpack-4

【解决方案1】：

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

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

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

它允许你传入一个目录来搜索，一个标志表示是否也应该搜索子目录，以及常规匹配文件的表达式。

webpack 在构建时解析代码中的 require.context()。

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

【讨论】：

也许this gist可以帮助理解
它本身没有用，但让我找到了解决方案：上下文。所以，谢谢！

【解决方案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 错误...如果有人有更好的想法，我愿意接受。

【讨论】：