demos: upgrade to webpack 5

perliedman · Oct 28, 2020 · b600cad · b600cad
1 parent baa68b1
commit b600cad
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 10 deletions.
diff --git a/demo-webpack/index.html b/demo-webpack/index.html
@@ -3,14 +3,10 @@
   <head>
     <title>Leaflet Control Geocoder</title>
     <meta charset="utf-8" />
-    <link rel="stylesheet" href="./node_modules/leaflet/dist/leaflet.css" />
-    <link
-      rel="stylesheet"
-      href="./node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css"
-    />
+    <link rel="stylesheet" href="./dist/leaflet.css" />
   </head>
   <body>
     <div id="map" style="width: 600px; height: 400px;"></div>
-    <script src="./bundle.js"></script>
+    <script src="./dist/leaflet.js"></script>
   </body>
 </html>
diff --git a/demo-webpack/main.js b/demo-webpack/main.js
@@ -1,6 +1,9 @@
 import L from 'leaflet';
 import 'leaflet-control-geocoder';
 
+import 'leaflet/dist/leaflet.css';
+import 'leaflet-control-geocoder/dist/Control.Geocoder.css';
+
 var map = L.map('map').setView([0, 0], 2);
 L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'

diff --git a/demo-webpack/package.json b/demo-webpack/package.json
@@ -9,7 +9,10 @@
     "leaflet-control-geocoder": "^1.8.0"
   },
   "devDependencies": {
-    "webpack": "^4.33.0",
-    "webpack-cli": "^3.3.3"
+    "css-loader": "^5.0.0",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^1.2.1",
+    "webpack": "^5.3.0",
+    "webpack-cli": "^4.1.0"
   }
 }
diff --git a/demo-webpack/webpack.config.js b/demo-webpack/webpack.config.js
@@ -1,8 +1,26 @@
 /* eslint-env node */
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
 module.exports = {
   mode: 'production',
-  entry: './main.js',
+  entry: {
+    leaflet: './main.js'
+  },
   output: {
-    filename: './bundle.js'
+    publicPath: ''
+  },
+  plugins: [new MiniCssExtractPlugin()],
+
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [MiniCssExtractPlugin.loader, 'css-loader']
+      },
+      {
+        test: /\.(png|gif)$/,
+        use: ['file-loader']
+      }
+    ]
   }
 };