Webpack 4：使用文件加载器在输出中包含许多 JSON 文件

Question

我正在使用 Webpack 4，并试图实现以下目标：

collections/ 文件夹包含许多 JSON 文件，我想以 [name].[chunkhash].json（或这个的变体）。

在 JS 文件中，我想动态地要求它们，例如 import(`collections/${name}.json`)。此外，我希望此 require 语句解析为块的 URL，因此我可以使用 Backbone.

获取它

似乎 file-loader 是它的完美候选者，但我很难让它与 JSON 文件一起工作。

webpack.config.js

{
  test: [
    /\.json$/
  ],
 type: 'javascript/auto',
 include: [/generated/],
 loader: 'file-loader'
}

Backbone 型号

url: function() {
    return import(`collections/${this.get('id')}.json`);
}

我想将此处的 import 语句替换为输出文件夹中 JSON 文件的 URL。这里应该使用什么样式的导入？

P.S。为此，我想避免 copy-webpack-plugin。

Answer 1

此处的解决方案是使用 require() 而不是 import()，这将同步解析为资产的 URL:

Backbone 型号

url: function() {
  return require(`collections/${this.get('id')}.json`);
}

Webpack 4: include many JSON files in output using file-loader