如何在 Vaadin 应用程序中配置 webpack.config.js？从 node_modules 导入 CSS/PNG传单库

问题描述

我正在尝试将 Leaflet.js 集成到我的 Vaadin 应用程序中。出于某种原因，我无法加载 CSS 和标记......经过大量阅读后，我发现（我希望我做到了）我需要配置 webpack.config.js 以便能够正确加载所有内容。我尝试了所有解决方案，但似乎都不起作用

这是我的传单连接器.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']
      }
    ]
  },});

并尝试了很多类似的配置，但不知何故我无法弄清楚为什么这些解决方案对我不起作用。我想我错过了一些东西，但我不知道是什么

解决方法

所以我真的很难找到任何好的解决方案，但意识到这个 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();