[英]How to use Webpack to load a static file with a relative path with React?
我正在尝试使用Tangram库在React中创建一个地图组件。 我让它单独使用Webpack,但是当我在混合中使用反应时它开始讨厌。
我尝试过使用各种加载器,例如原始加载器,yaml加载器等等,但到目前为止它们都没有用过。
map组件如下所示:
// -- 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响应。
解决方案是,静态文件没有被复制到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' },
]),
],
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.