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。这里应该使用什么导入方式？

附言我想为此避免copy-webpack-plugin。

Answer 1

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

骨干模型

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