From b600cadcc6c2c4473ea717fc895d24bd12d973fc Mon Sep 17 00:00:00 2001 From: Simon Legner Date: Wed, 28 Oct 2020 20:43:48 +0100 Subject: [PATCH] demos: upgrade to webpack 5 --- demo-webpack/index.html | 8 ++------ demo-webpack/main.js | 3 +++ demo-webpack/package.json | 7 +++++-- demo-webpack/webpack.config.js | 22 ++++++++++++++++++++-- 4 files changed, 30 insertions(+), 10 deletions(-) diff --git a/demo-webpack/index.html b/demo-webpack/index.html index a6a2d06d..7f00f959 100644 --- a/demo-webpack/index.html +++ b/demo-webpack/index.html @@ -3,14 +3,10 @@ Leaflet Control Geocoder - - +
- + diff --git a/demo-webpack/main.js b/demo-webpack/main.js index 7e78722e..01593754 100644 --- 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: '© OpenStreetMap contributors' diff --git a/demo-webpack/package.json b/demo-webpack/package.json index 162ea363..04ef3f99 100644 --- 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 index 91fa3d8c..628bb37e 100644 --- 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'] + } + ] } };