Как использовать Webpack для загрузки статического файла с относительным путем с React?

Question

Я пытаюсь создать компонент карты в React с использованием библиотеки Tangram. Я работал с одним только Webpack, но он начал давать сбои, когда я использовал в реакции микс.

Я пытался использовать различные загрузчики, такие как raw-загрузчик, yaml-загрузчик и т. Д., Но ни один из них до сих пор не работал.

Компонент карты выглядит следующим образом:

// -- Import dependencies --
import React from 'react';
import { Map } from 'react-leaflet';

// -- Import Tangram --
import Tangram from 'tangram';
import yaml from 'js-yaml';
import data from '!!raw-loader!./scene.yaml';
export default class LeafletMap extends React.Component {
  componentDidMount() {
    const layer = Tangram.leafletLayer({
      scene: data
    });
    layer.addTo(this.map.leafletElement);
  }

  render() {
    return (
      <Map center={[40.70532, -74.00976]} zoom={15} ref={(ref) => {     this.map = ref }} />
    );
  }
}

Как я могу на самом деле загрузить scene.yaml, чтобы библиотека Tangram использовала его?

В конце он отвечает 404, поскольку файл не найден.

Answer 1

Решение было в том, что статические файлы не копировались в пакет, созданный веб-пакетом.

Я решил это, используя CopyPlugin в конфигурации webpack и скопировав файлы в папку с уважением относительного пути, например так:

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: {
    filename: './bundle.js'
  },
  plugins: [
    new CopyPlugin([
      { from: 'src', to: 'src' },
    ]),
  ],
};