webpackでleafletのバンドル

8074 ワード
webpack leaflet leaflet テキストリンク

この解説がすばらしいです

Leaflet.jsをWebpackでbuildする｜hinosita's diary

leafletのインストール

必要なローダー

npm install --save-dev style-loader css-loader file-loader url-loader

Leaflet

npm install --save-dev leaflet

webpackの設定

webpack.config.js
    ...
    entry: {
        map_js: './assets/js/map.js',
        map_css: './assets/css/map.css',
    },
    ...
    rules: [
      ...
      {
        test: /\.css/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
          options: {
            url: false
          }
        }]
      },
      {
        test: /\.png/,
        use: [{
          loader: 'url-loader',
        }]
      }
    ]
  }

https://leafletjs.com/ トップの例を書いてみます

assets/css/map.css
@import "~leaflet/dist/leaflet.css";

body { 
    padding: 0;
    margin: 0;
}

html, body, #map {
    height: 100%;
    width: 100vw;
}
assets/js/map.js
import L from 'leaflet'
import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png'
import iconUrl from 'leaflet/dist/images/marker-icon.png'
import shadowUrl from 'leaflet/dist/images/marker-shadow.png'


delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
  iconRetinaUrl: iconRetinaUrl,
  iconUrl: iconUrl,
  shadowUrl: shadowUrl
});


var mymap = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map)
    .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
    .openPopup();