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

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$/);

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为了那个原因。让我知道它是否有效。 :)