如何在Vaadin应用中配置webpack.config.js ?从node_modules(传单库)中导入CSS /

Question

我正在尝试将Leaflet.js集成到我的Vaadin应用程序中。由于某些原因，我无法加载CSS和标记…经过大量的阅读，我发现(我希望我做到了)，我需要配置webpack.config.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: '&copy; <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);
}
}

你看，我用loadCSS函数做了这个丑陋的事情，只是为了能够导入CSS。

这里是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)));
}

}

那么，我的问题是:我如何配置webpack?

webpack.config.js:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
module.exports = merge(flowDefaults, {

});

我试过了:

const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');

module.exports = merge(flowDefaults, {
module: {
rules: [
{
test: /.css$/,
use: ['style-loader', 'css-loader']
}
]
},
});

并尝试了许多类似的配置，但不知何故，我不明白为什么这些解决方案不适合我。我想我错过了什么，但我不知道是什么

Answer 1

所以我真的很难找到任何好的解决方案，但意识到这个webpack配置有助于导入传单标记:

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:

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();