Как загрузить *.atlas файл в React-компонент?

Question

[VIGF]

Пытаюсь загрузить в React компонент файлы анимаций(json, png, atlas).

import * as spinePng3 from './skeleton.png';
import * as spineAtlas3 from './skeleton.atlas';
import * as spineJSON3 from './skeleton.json';

Если файлы лежат в одной директории с компонентом, то все работает. Если положить файлы в другую папку, то консоль пишет

Module not found: Error: Can't resolve '/ships/untitled.atlas'

Проект собирается Webpack-ом и для него никакого atlas-loader-а не нашел.
Как можно решить эту проблему?

Comments

[Антон Спирин]

А вы расширение добавили в регулярку для file-loader в rules конфига?

[VIGF]

Антон Спирин, да

[Антон Спирин]

VIGF, а как импортируете?

[VIGF]

Антон Спирин, Как в описании. В файле компонента

import * as spinePng3 from './ships/skeleton.png';
import * as spineAtlas3 from './ships/skeleton.atlas';
import * as spineJSON3 from './ships/skeleton.json';

[Антон Спирин]

VIGF, почему *? Там же нет модулей. Надо так:

import spinePng3 from './ships/skeleton.png';
import spineAtlas3 from './ships/skeleton.atlas';
import spineJSON3 from './ships/skeleton.json';

[VIGF]

Антон Спирин, Все равно ошибка

Uncaught Error: Cannot find module '/ships/skeleton.atlas'

[Антон Спирин]

VIGF, а что у вас в webpack config?

[VIGF]

Антон Спирин,

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.scss$/,
        use: ['style-loader', cssLoader(argv), 'sass-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', cssLoader(argv)],
      },
      {
        test: /\.(png|jpg|gif|atlas)$/,
        use: ['file-loader'],
      },
      {
        test: /\.svg/,
        loader: 'file-loader',
      },
      {
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/',
            },
          },
        ],
      },
    ],
  },