У вас, кажется, есть некоторые заблуждения относительно того, что делает file-loader
. file-loader
, конечно, копирует файлы в ваш каталог dist, но он копирует файлы только через , если они загружаются кодом . В настоящее время webpack не знает, что файл существует. Если вы выполнили require('./some.json')
(или импорт), это вызовет загрузчик файлов и заменит URL. В коде, который выполняет выборку, замените:
var url = "/src/assets/data/main.json";
... на:
var url = require('../assets/data/main.json');
... и это сделает правильную перезапись / вывод.
Обновление:
Вам также нужен дополнительный шаг. Webpack 4 по умолчанию включает содержимое файла JSON в вашем пакете JS, которое вам не нужно, так как вы хотите загрузить . Чтобы обойти это, я добавил правило к вашему webpack.common.js
:
module.exports = {
// ...
module: {
rules: [
// ...Right before your file-loader rule
// Bypass automatic `.json` file processing for webpack
{
type: 'javascript/auto',
test: /\.json$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
},
// Second file loader. note the removal of the `json` pattern
{
test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: './assets'
}
}
],
// ...
}
// ...
};
... и теперь требуется триггеры .json
файлов file-loader
.