[英]How to configure webpack.config.js in Vaadin application? importing CSS / PNG from node_modules (Leaflet library)
I'm trying to integrate Leaflet.js into my Vaadin application.我正在尝试将 Leaflet.js 集成到我的 Vaadin 应用程序中。 For some reason I couldn't load the CSS and the markers... After a lot of reading I figured out(I hope I did) that I need to configure webpack.config.js in order to be able to load everything properly.
由于某种原因,我无法加载 CSS 和标记......经过大量阅读后,我发现(我希望我做到了)我需要配置 webpack.config.js 以便能够正确加载所有内容。 I tried every solution but none of them seems to work
我尝试了所有解决方案,但似乎都不起作用
here is my leaflet-connector.js:这是我的传单-connector.js:
import L from 'leaflet';
import style from 'leaflet/dist/leaflet.css';
import 'leaflet/dist/leaflet.css';
import markericon2x from 'leaflet/dist/images/marker-icon-2x.png';
import markershadow from 'leaflet/dist/images/marker-shadow.png';
import markericon from 'leaflet/dist/images/marker-icon.png';
window.Vaadin.Flow.Legacy = window.Vaadin.Flow.Legacy || {};
window.Vaadin.Flow.LeafletJs = {
init: function(configurationJson,element) {
if (element.$connector) {
return;
}
loadCSS(style);
element.$connector = {
init: function(configurationJson,element) {
if(navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(position){
const {latitude} = position.coords;
const {longitude} = position.coords;
const coords = [latitude, longitude];
const map = L.map(element).setView(coords, 13);
console.log(markericon);
console.log("----------------------------------------------------------");
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker(coords).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: markericon2x,
iconUrl: markericon,
shadowUrl: markershadow
});
},
function() {
alert('could not get your location');
})
},
},
function loadCSS(css) {
var exists = document.getElementById("____fx-leaflet_____") !== null;
if (exists) return;
var head = document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.id = "____fx-leaflet_____";
style.innerHTML = css;
head.insertBefore(style, head.firstChild);
},
element.$connector.init(configurationJson,element);
}
}
You see, i did this ugly thing with the loadCSS function just to be able to import the CSS.你看,我用 loadCSS function 做了这个丑陋的事情,只是为了能够导入 CSS。
here is the LeafletJs.java:这是 LeafletJs.java:
import com.vaadin.flow.component.AttachEvent;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.function.SerializableConsumer;
@NpmPackage(value = "leaflet",version = "1.7.1")
@NpmPackage(value = "file-loader",version = "1.1.4")
@JsModule(value = "./js/leaflet-connector.js")
public class LeafletJs extends Div {
private boolean initialized = false;
public LeafletJs() {
addClassName("leafletjs");
}
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent); //To change body of generated methods, choose Tools | Templates.
initConnector();
}
private void initConnector() {
if (initialized == false) {
initialized = true;
runBeforeClientResponse(ui -> ui.getPage().executeJavaScript(
"window.Vaadin.Flow.LeafletJs.init($0, $1)", null,
getElement()));
}
}
void runBeforeClientResponse(SerializableConsumer<UI> command) {
getElement().getNode().runWhenAttached(ui -> ui
.beforeClientResponse(this, context -> command.accept(ui)));
}
}
So, my question is: how can I configure the webpack?所以,我的问题是:如何配置 webpack?
webpack.config.js: webpack.config.js:
const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
module.exports = merge(flowDefaults, {
});
I tried this:我试过这个:
const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
module.exports = merge(flowDefaults, {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
},
});
and tried a lot of similar configuration, but somehow I couldnt figure out why these solutions are not working for me.并尝试了很多类似的配置,但不知何故我无法弄清楚为什么这些解决方案不适合我。 I think I'm missing something, but I have no clue what
我想我错过了一些东西,但我不知道是什么
so I really struggled to find any good solutions, but realized that this webpack config helps to import the leaflet markers:所以我真的很难找到任何好的解决方案,但意识到这个 webpack 配置有助于导入 leaflet 标记:
module.exports = merge(flowDefaults, {
module: {
rules: [
{ test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/i,
loader: "file-loader?name=build/images/[name].[ext]"
}
]
}
});
leaflet-connector.js:传单-connector.js:
import markericon2x from 'leaflet/dist/images/marker-icon-2x.png';
import markershadow from 'leaflet/dist/images/marker-shadow.png';
import img from 'leaflet/dist/images/marker-icon.png';
...
delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
iconRetinaUrl: markericon2x,
iconUrl: img,
shadowUrl: markershadow
});
L.marker(coords).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.