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'
}

骨干模型

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

我希望将此处的import语句替换为输出文件夹中JSON文件的URL。在这里应该使用哪种导入样式？

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

Answer 1

这里的解决方案是使用require()而不是import()，它会同步解析为资产的URL：

骨干模型

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