如何使用 Webpack 通过 React 加载具有相对路径的静态文件？答案

【问题标题】：How to use Webpack to load a static file with a relative path with React?如何使用 Webpack 通过 React 加载具有相对路径的静态文件？
【发布时间】：2019-04-30 03:18:50
【问题描述】：

我正在尝试使用七巧板库在 React 中创建一个地图组件。我让它单独与 Webpack 一起工作，但是当我在混合中使用 react 时它开始出现问题。

我尝试过使用各种加载器，例如原始加载器、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 响应。

【问题讨论】：

为什么是两个感叹号？你确保你的配置中有相关的加载器吗？您是否确保该文件有效地存在于目录中？
您是否配置了 YAML 加载程序？您的导入语法看起来很奇怪。如果您配置了正确的加载程序，它应该只是import data from './scene.yaml';。尝试构建您的项目并查看 YAML 文件的构建位置，并将其与您获得 404 的 URL 相关联。

标签： javascript node.js reactjs webpack tangram

【解决方案1】：

解决方案是，静态文件没有被复制到 webpack 构建的包中。

我通过在 webpack 配置中使用 CopyPlugin 并将文件复制到尊重相对路径名的文件夹中解决了这个问题，如下所示：

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

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

【讨论】：