Included PNG files into build for easier deployment

package.json

@@ -33,6 +33,7 @@
     "sass": "^1.49.11",
     "sass-loader": "^12.6.0",
     "style-loader": "^3.3.1",
+    "url-loader": "^4.1.1",
     "webpack": "^5.71.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"

src/index.jsx

@@ -5,13 +5,19 @@ import { createConfig } from './Config';
 
 import './index.css';
 import 'leaflet/dist/leaflet.css';
+
+import MarkerIcon from '../public/leaflet/marker-icon.png';
+import MarkerShadow from '../public/leaflet/marker-shadow.png';
+import MarkerIcon2x from '../public/leaflet/marker-icon-2x.png';
+import MarkerShadow2x from '../public/leaflet/marker-shadow-2x.png';
+
 import GeoTaggingWidget from './GeoTaggingWidget';
 
 L.Icon.Default.mergeOptions({
-  iconUrl: 'leaflet/marker-icon.png',
-  shadowUrl: 'leaflet/marker-shadow.png',
-  iconRetinaUrl: 'leaflet/marker-icon-2x.png',
-  shadowRetinaUrl: 'leaflet/marker-shadow-2x.png'
+  iconUrl: MarkerIcon,
+  shadowUrl: MarkerShadow,
+  iconRetinaUrl: MarkerIcon2x,
+  shadowRetinaUrl: MarkerShadow2x
 });
 
 const GeoTaggingPlugin = config => props =>

webpack.config.js

@@ -57,7 +57,8 @@ module.exports = {
         }
       },
       { test: /\.css$/,  use: [ 'style-loader', 'css-loader'] },
-      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] }
+      { test: /\.scss$/, use: [ 'style-loader', 'css-loader', 'sass-loader' ] },
+      { test: /\.png$/, use: [ 'url-loader?mimetype=image/png' ]}
     ]
   },
   devServer: {