demos: upgrade to webpack 5

simon04 · simon04 · commit b600cadcc6c2 · 2020-10-28T20:49:26.000+01:00
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']
+      }
+    ]
   }
 };

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,10 @@`
`9`	`9`	`"leaflet-control-geocoder": "^1.8.0"`
`10`	`10`	`},`
`11`	`11`	`"devDependencies": {`
`12`		`- "webpack": "^4.33.0",`
`13`		`- "webpack-cli": "^3.3.3"`
	`12`	`+ "css-loader": "^5.0.0",`
	`13`	`+ "file-loader": "^6.2.0",`
	`14`	`+ "mini-css-extract-plugin": "^1.2.1",`
	`15`	`+ "webpack": "^5.3.0",`
	`16`	`+ "webpack-cli": "^4.1.0"`
`14`	`17`	`}`
`15`	`18`	`}`