在React JS中为资产创建静态链接

Question

我需要创建一个活动的URL或链接，以显示我的应用程序中的资产。

例如，一个dog.png应该在类似以下内容中找到：本地主机：3000 / static / media / dog.png

在React中，如果是图像文件，则为我

import cat_png from '../../game_book/images/cat.png';

cat_png实际上将包含以下对我有用的值：

http://localhost:3000/static/media/cat.35853d78.png

Eventhough javascript将cat.png更改为cat.35853d78.png，这对我来说很好，因为我有该资产的静态网址...（您称这种链接为什么？它称为资产链接吗？） ...

但是，如果有，请输入我的json文件：

import animals_json from '../../game_book/images/animals.json';

animal_json实际上将包含json文件的内容例如

{frames: {…}, meta: {…}}

并且没有给我提供可以显示json文件内容的有效URL。

我想要的是一个类似链接：

http://localhost:3000/static/media/animals.json

将显示我文件的内容

我正在研究有关JavaScript游戏编程的书，并且示例代码通过资产的那些活动URL链接加载了资产。...

如何执行？

Answer 1

Webpack 4提供对json文件的本地处理。这意味着默认情况下，json的导入将由webpack处理，并且当我们尝试导入时，我们将始终将json作为javascript对象。

请参阅“加载程序”部分下的Webpack文档https://webpack.js.org/concepts/-

[开箱即用，webpack仅支持JavaScript和JSON文件。

因此，如果要覆盖此行为并将json作为URL导入，则必须添加一个附加的加载器，该加载器可以处理json文件并修改默认行为。

其中一个就是url-loader。在webpack.config.js中添加以下行-

       {
          test: /\.json$/,
          loader: 'url-loader',
          options: {
            limit: false,
            publicPath: 'assets'
          },
          type:'javascript/auto'
        }

这会将所有json文件加载为url。