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

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, but it doesn't seem to help me in this case. If I use the IgnorePlugin，无法加载 json 文件。

谢谢！

Answer 1

你可以这样使用require.context：

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

You can create your own context with the require.context() function.

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

webpack parses for require.context() in the code while building.

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

Answer 2

解决了！当 webpack 找到 require with expression 时，它会继续 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 错误...如果有人有更好的想法，我愿意接受。

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

How to add dynamic requires as external?

webpack

webpack-4