diff --git a/notes.txt b/notes.txt index 64aa12d..eaf79d8 100644 --- a/notes.txt +++ b/notes.txt @@ -148,3 +148,8 @@ module.exports = { This will generate a file dist/index.html containing the following: + + +npx @angular/cli generate service popup --skip-tests +CREATE src/app/popup.service.ts (134 bytes) + diff --git a/package-lock.json b/package-lock.json index 5bafbe6..310f4a3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -189,9 +189,9 @@ } }, "node_modules/@angular/common": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz", - "integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz", + "integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==", "peer": true, "dependencies": { "tslib": "^2.2.0" @@ -200,14 +200,14 @@ "node": "^12.14.1 || >=14.0.0" }, "peerDependencies": { - "@angular/core": "12.2.2", + "@angular/core": "12.2.3", "rxjs": "^6.5.3 || ^7.0.0" } }, "node_modules/@angular/compiler": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz", - "integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz", + "integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==", "peer": true, "dependencies": { "tslib": "^2.2.0" @@ -217,9 +217,9 @@ } }, "node_modules/@angular/core": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz", - "integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz", + "integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==", "dependencies": { "tslib": "^2.2.0" }, @@ -232,9 +232,9 @@ } }, "node_modules/@angular/forms": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz", - "integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz", + "integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==", "dependencies": { "tslib": "^2.2.0" }, @@ -242,16 +242,16 @@ "node": "^12.14.1 || >=14.0.0" }, "peerDependencies": { - "@angular/common": "12.2.2", - "@angular/core": "12.2.2", - "@angular/platform-browser": "12.2.2", + "@angular/common": "12.2.3", + "@angular/core": "12.2.3", + "@angular/platform-browser": "12.2.3", "rxjs": "^6.5.3 || ^7.0.0" } }, "node_modules/@angular/platform-browser": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz", - "integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz", + "integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==", "dependencies": { "tslib": "^2.2.0" }, @@ -259,9 +259,9 @@ "node": "^12.14.1 || >=14.0.0" }, "peerDependencies": { - "@angular/animations": "12.2.2", - "@angular/common": "12.2.2", - "@angular/core": "12.2.2" + "@angular/animations": "12.2.3", + "@angular/common": "12.2.3", + "@angular/core": "12.2.3" }, "peerDependenciesMeta": { "@angular/animations": { @@ -270,9 +270,9 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz", - "integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz", + "integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==", "dependencies": { "tslib": "^2.2.0" }, @@ -280,10 +280,10 @@ "node": "^12.14.1 || >=14.0.0" }, "peerDependencies": { - "@angular/common": "12.2.2", - "@angular/compiler": "12.2.2", - "@angular/core": "12.2.2", - "@angular/platform-browser": "12.2.2" + "@angular/common": "12.2.3", + "@angular/compiler": "12.2.3", + "@angular/core": "12.2.3", + "@angular/platform-browser": "12.2.3" } }, "node_modules/@babel/code-frame": { @@ -2444,9 +2444,9 @@ "dev": true }, "node_modules/@types/node": { - "version": "16.7.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz", - "integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==", + "version": "16.7.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz", + "integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==", "dev": true }, "node_modules/@webassemblyjs/ast": { @@ -4972,9 +4972,9 @@ "dev": true }, "node_modules/electron-to-chromium": { - "version": "1.3.817", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz", - "integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==", + "version": "1.3.818", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz", + "integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==", "dev": true }, "node_modules/emoji-regex": { @@ -12968,51 +12968,51 @@ } }, "@angular/common": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.2.tgz", - "integrity": "sha512-cAfPHis8ynpR+qV9ViztCuNBjJ8YRDivvpUXtXecJYYBUPQt9uIiMLeqvBuWmFr+zKD+yAhWywbHEo/4m1JVtQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-12.2.3.tgz", + "integrity": "sha512-AkOeknm35kzLqqh5dIz1143e3Q1MjWgi7THlY3StY63yphseQUUvGQSNHkDSIpfwBN8Mt+ZykKFjhY+cNFYt7w==", "peer": true, "requires": { "tslib": "^2.2.0" } }, "@angular/compiler": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.2.tgz", - "integrity": "sha512-4RFFfpAfsT9/xSHRlp1flNAG1dj8WFgTBYb+wu496PziorTBRx/0jsLjxhz547ty6Bn1WZNwQbqBHzx67ehJBg==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-12.2.3.tgz", + "integrity": "sha512-jlS7XUokGb4eH6aYEIanrq6a7ZxcMI9GmMr5tBAdIHusH3b40dcMpZVXIxoGzv1Ws47m2izDCrjWjkFKeXPavQ==", "peer": true, "requires": { "tslib": "^2.2.0" } }, "@angular/core": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.2.tgz", - "integrity": "sha512-zNgH1iFB1vCVNk9PZ+GCo0sZXD19Zt3BobgmHkWJ+PVXRPuKpuLBXWsq7d9IXdbFopQQWWfVHo0eDagIicrSFQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-12.2.3.tgz", + "integrity": "sha512-gv3FJPiwDKugySzPepBzXrbr8HxeK2enotEmducNv3IdtGZPS0/qrbDVt7W0woRt7BGAeWaZKEaPoFzMZeEbCw==", "requires": { "tslib": "^2.2.0" } }, "@angular/forms": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.2.tgz", - "integrity": "sha512-v0zYUdbL+odeDWJNYGq9KZ3535+esDuPaPjXkZkq05/DPCMZym35hx6RlFWn5DElSSfxn4n15mfZXaIWbJNbEQ==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-12.2.3.tgz", + "integrity": "sha512-euc2omQ8YVRLjmJDGXRBNLLTzOQZjLYn/DxB3yChWNcsiOZoqhBQprgioQZt4GnCoQJyBH9iQZENnHOZk0TD1w==", "requires": { "tslib": "^2.2.0" } }, "@angular/platform-browser": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.2.tgz", - "integrity": "sha512-uI/tBCzGl7ifQZB7euidO4OOY4qz2jrlMH2Ri6nVuXlLFl4/39ekq75xbJtIQ9/Nf4sWYpUytkq1oW820ZOtcA==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-12.2.3.tgz", + "integrity": "sha512-dPA9JDZtxBb4VvhFFMh0sQzTfMcUXYxe/jY1rsKqYJVbIW6NZ1kj9/00acxTU0QdrW4xv5TlwgOdTYck6//C4g==", "requires": { "tslib": "^2.2.0" } }, "@angular/platform-browser-dynamic": { - "version": "12.2.2", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.2.tgz", - "integrity": "sha512-Ig0gyntnO9nt7ZLkRhDpdyqKH2kgza1i7L5fxtyw72JdPaUcgPSPvL06GST/ak4WQ04hEb28IEYQGqLKCOUvEA==", + "version": "12.2.3", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-12.2.3.tgz", + "integrity": "sha512-K31+QW6ubquSXkWaf54TXIkV5aoRLwZ5aFo8TEAXbmddgwxhWF7egCB5j0pajq5QTxyDnXns9140HNcqg4QLcw==", "requires": { "tslib": "^2.2.0" } @@ -14581,9 +14581,9 @@ "dev": true }, "@types/node": { - "version": "16.7.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.1.tgz", - "integrity": "sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==", + "version": "16.7.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-16.7.2.tgz", + "integrity": "sha512-TbG4TOx9hng8FKxaVrCisdaxKxqEwJ3zwHoCWXZ0Jw6mnvTInpaB99/2Cy4+XxpXtjNv9/TgfGSvZFyfV/t8Fw==", "dev": true }, "@webassemblyjs/ast": { @@ -16604,9 +16604,9 @@ "dev": true }, "electron-to-chromium": { - "version": "1.3.817", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.817.tgz", - "integrity": "sha512-Vw0Faepf2Id9Kf2e97M/c99qf168xg86JLKDxivvlpBQ9KDtjSeX0v+TiuSE25PqeQfTz+NJs375b64ca3XOIQ==", + "version": "1.3.818", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.818.tgz", + "integrity": "sha512-c/Z9gIr+jDZAR9q+mn40hEc1NharBT+8ejkarjbCDnBNFviI6hvcC5j2ezkAXru//bTnQp5n6iPi0JA83Tla1Q==", "dev": true }, "emoji-regex": { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index aecb360..76a37b8 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -6,6 +6,7 @@ import { MapComponent } from './map/map.component'; import { HttpClientModule, HttpClient } from '@angular/common/http'; //for http requests import { MarkerService } from './services/marker.service'; +import { PopupService } from './services/popup.service'; import { DatasetApiService } from "./services/dataset-api.service"; import { HttpService } from "./services/http.service"; @@ -25,7 +26,7 @@ import { HttpService } from "./services/http.service"; // imports: Other modules whose exported classes are needed by component templates declared in this NgModule. imports: [BrowserModule, HttpClientModule], providers: [ - MarkerService, HttpService, DatasetApiService, + MarkerService, PopupService, HttpService, DatasetApiService, // { // provide: DatasetApiInterface, // useClass: SplittedDataDatasetApiInterface, diff --git a/src/app/map/base-map.component.ts b/src/app/map/base-map.component.ts index 0dd8d68..68b8c01 100644 --- a/src/app/map/base-map.component.ts +++ b/src/app/map/base-map.component.ts @@ -1,25 +1,11 @@ -import { Component, AfterViewInit, Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core'; -import * as L from 'leaflet'; +import { Directive, OnChanges, SimpleChanges, EventEmitter, Input, Output, OnInit } from '@angular/core'; +import { Map, Control, MapOptions, LatLngBoundsExpression, tileLayer } from 'leaflet'; // import { MarkerService } from '../services/marker.service'; import { LayerOptions, LayerMap } from './map-options'; const DEFAULT_BASE_LAYER_NAME = 'BaseLayer'; const DEFAULT_BASE_LAYER_URL = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'; const DEFAULT_BASE_LAYER_ATTRIBUTION = '© OpenStreetMap contributors'; -// const iconRetinaUrl = 'assets/marker-icon-2x.png'; -// const iconUrl = 'assets/marker-icon.png'; -// const shadowUrl = 'assets/marker-shadow.png'; -// const iconDefault = L.icon({ -// iconRetinaUrl, -// iconUrl, -// shadowUrl, -// iconSize: [25, 41], -// iconAnchor: [12, 41], -// popupAnchor: [1, -34], -// tooltipAnchor: [16, -28], -// shadowSize: [41, 41] -// }); -// L.Marker.prototype.options.icon = iconDefault; // @Component({ // selector: 'app-map', @@ -48,20 +34,20 @@ export abstract class BaseMapComponent implements OnChanges, OnInit { * The corresponding leaflet map options (see: https://leafletjs.com/reference-1.3.4.html#map-option) */ @Input() - public mapOptions: L.MapOptions; + public mapOptions: MapOptions; // markerService: MarkerService /** * Bounds for the map */ @Input() - public fitBounds: L.LatLngBoundsExpression; + public fitBounds: LatLngBoundsExpression; /** * Describes the the zoom control options (see: https://leafletjs.com/reference-1.3.4.html#control-zoom) */ @Input() - public zoomControlOptions: L.Control.ZoomOptions; + public zoomControlOptions: Control.ZoomOptions; @Input() public baseMaps: LayerMap; @@ -72,9 +58,9 @@ export abstract class BaseMapComponent implements OnChanges, OnInit { @Output() public onMapInitializedEvent: EventEmitter = new EventEmitter(); - protected oldBaseLayer: L.Control.LayersObject = {}; - protected map: L.Map; - protected zoomControl: L.Control.Zoom; + protected oldBaseLayer: Control.LayersObject = {}; + protected map: Map; + protected zoomControl: Control.Zoom; constructor() { } // constructor(private markerService: MarkerService) { } @@ -98,7 +84,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit { } protected initMap(): void { - this.map = L.map(this.mapId, { + this.map = new Map(this.mapId, { center: [48.208174, 16.373819], zoom: 3 }); @@ -128,7 +114,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit { layerOptions = { label: DEFAULT_BASE_LAYER_NAME, visible: true, - layer: L.tileLayer(DEFAULT_BASE_LAYER_URL, { + layer: tileLayer(DEFAULT_BASE_LAYER_URL, { attribution: DEFAULT_BASE_LAYER_ATTRIBUTION }) }; @@ -160,7 +146,7 @@ export abstract class BaseMapComponent implements OnChanges, OnInit { private updateZoomControl() { if (this.zoomControl) { this.map.removeControl(this.zoomControl); } if (this.zoomControlOptions) { - this.zoomControl = L.control.zoom(this.zoomControlOptions).addTo(this.map); + this.zoomControl = new Control.Zoom(this.zoomControlOptions).addTo(this.map); } } diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index d762793..b57bf9d 100644 --- a/src/app/map/map.component.ts +++ b/src/app/map/map.component.ts @@ -4,15 +4,12 @@ import { Map, Control, FeatureGroup, geoJSON, circleMarker, FitBoundsOptions, La import { MarkerService } from '../services/marker.service'; import { DatasetApiService } from '../services/dataset-api.service'; import { BaseMapComponent } from './base-map.component'; +import { PopupService } from '../services/popup.service'; @Component({ selector: 'app-map', templateUrl: './map.component.html', styleUrls: ['./map.component.css'], - // providers: [MarkerService] - // providers: [ - // HelgolandServicesConnector - // ] }) // https://52north.github.io/helgoland-toolbox/classes/CachedMapComponent.html#source export class MapComponent @@ -34,7 +31,7 @@ export class MapComponent public onContentLoadingEvent: EventEmitter = new EventEmitter(); /** - * @input Additional configuration for the marker zooming (https://leafletjs.com/reference-1.3.4.html#fitbounds-options) + * @input Additional configuration for the marker zooming */ @Input() public fitBoundsMarkerOptions: FitBoundsOptions; @@ -47,12 +44,10 @@ export class MapComponent // constructor() { } constructor( protected markerService: MarkerService, + private popupService: PopupService, protected datasetApiService: DatasetApiService) { super(); } - // constructor(markerService: MarkerService) { - // this.markerService = markerService; - // } ngAfterViewInit(): void { this.initMap(); @@ -76,7 +71,7 @@ export class MapComponent marker.on('click', () => { this.onSelected.emit(station); }); - + marker.bindPopup(this.popupService.makeCapitalPopup(station.properties)); } }); this.markerFeatureGroup.addTo(this.map); diff --git a/src/app/services/popup.service.ts b/src/app/services/popup.service.ts new file mode 100644 index 0000000..5491b15 --- /dev/null +++ b/src/app/services/popup.service.ts @@ -0,0 +1,13 @@ +import { Injectable } from '@angular/core'; + +@Injectable() +export class PopupService { + + constructor() { } + + makeCapitalPopup(data: any): string { + return `` + + `
Name: ${data.label}
` + + `Visit station api` + } +} diff --git a/src/index.tmp.html b/src/index.tmp.html index 6ef3c48..fe8d8bd 100644 --- a/src/index.tmp.html +++ b/src/index.tmp.html @@ -8,23 +8,21 @@ <%= htmlWebpackPlugin.options.title || 'Webpack App'%> - + - - + + - - - - - + + - + <% for (var css in htmlWebpackPlugin.files.css) { %> + + <% } %> @@ -34,7 +32,9 @@ - + <% for (var js in htmlWebpackPlugin.files.js) { %> + + <% } %> \ No newline at end of file diff --git a/webpack.common.js b/webpack.common.js index d3dddac..865adab 100644 --- a/webpack.common.js +++ b/webpack.common.js @@ -30,7 +30,7 @@ module.exports = { path: path.resolve(__dirname, 'dist'), filename: '[name].' + fileNamePrefix + 'js', //filename: fileNamePrefix + '[name].js', // css loader will process all @import and url() with help of require() - publicPath: '/dist/', + // publicPath: '/dist/', // sourceMapFilename: "[name].js.map" }, @@ -110,7 +110,8 @@ module.exports = { // }, { test: /\.html$/, - exclude: /node_modules/, + // exclude: [/node_modules/], + include: path.resolve(__dirname, 'src/app'), use: { loader: 'raw-loader', options: { @@ -178,10 +179,10 @@ module.exports = { compress: { directives: false, - // drop_console: true, - // drop_debugger: true, - // keep_classnames: false, - // keep_fnames: false, + // drop_console: true, + // drop_debugger: true, + // keep_classnames: false, + // keep_fnames: false, }, mangle: true, // Note `mangle.properties` is `false` by default. keep_classnames: false, @@ -192,14 +193,14 @@ module.exports = { }, plugins: [ - new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin - // Options similar to the same options in webpackOptions.output - // both options are optional - // filename: '[name].css', - // chunkFilename: '[id].css', - filename: '[name].css', - chunkFilename: '[chunkhash].css', - }), + // new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin + // // Options similar to the same options in webpackOptions.output + // // both options are optional + // // filename: '[name].css', + // // chunkFilename: '[id].css', + // filename: '[name].css', + // chunkFilename: '[chunkhash].css', + // }), ] }; diff --git a/webpack.production.js b/webpack.production.js index 5a66c35..3afdc94 100644 --- a/webpack.production.js +++ b/webpack.production.js @@ -1,15 +1,27 @@ const { merge } = require('webpack-merge'); const common = require('./webpack.common.js'); const HtmlWebpackPlugin = require('html-webpack-plugin'); - +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = merge(common, { mode: 'production', devtool: 'source-map', plugins: [ new HtmlWebpackPlugin({ + favicon: "./src/favicon.ico", template: './src/index.tmp.html', - title: 'sensor viewer', - }) + title: 'sensor viewer', + // inject: true // Inject all scripts into the body + minify: false, // should html file be minified? + inject: false, + }), + new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin + // Options similar to the same options in webpackOptions.output + // both options are optional + // filename: '[name].css', + // chunkFilename: '[id].css', + filename: '[name].css', + chunkFilename: '[chunkhash].css', + }), ], }); \ No newline at end of file