Question

在我的组件中，我想要包含一个json数据文件，所以想想

import slides from './slides-data.json'

和slides-data.json看起来像

{
  "slides": [
    { img: "img.png", "text": "some text" },
    ...
  ]
}

理想情况下，我想将图像导入json文件，如此

import MyImage from './assets/img.png'
{
  "slides": [
    { img: "img.png", "text": "some text" },
    ...
  ]
}

这不是一个有效的json，但我使用webpack来处理加载器，并且想知道这样的事情是否可行？

Answer 1

您可以为slides-data.json编写自己的加载程序（只是示例，未经测试）：

module.exports = function(source) {
    this.cacheable();
    JSON.parse(source).slides.forEach(function(slide) {
        this.addDependency(slide.img); // need to resolve this path before adding as dependency
    });
    return source;
};

并在config中添加loader：

{test: /slides-data\.json$/, loader: "json-loader!your-custom-slides-loader"}

您也可以为slides-data.json使用自己的文件扩展名。

但首先看一下这些链接：

How to write a loader

Loaders API

有没有办法将文件/常量导入json文件

1 个答案: