webpack - 如何在 Vaadin 应用程序中配置 webpack.config.js?从 node_modules 导入 CSS / PNG(传单库)
问题描述
我正在尝试将 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: '© <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]"
}
]
}
});
传单-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();
推荐阅读
- android - 为什么 PagedList 适配器加载所有数据而不考虑页面大小?
- amazon-dynamodb - 放大 Graphql 不遵守我的查询限制
- javascript - 使用 JavaScript 正确创建 XML 表
- .net - 在 F# 中从 MongoDb Find 投影结果
- typescript - 如何在不使用接口的情况下定义对象属性的类型
- javascript - 有没有办法改变滚动行为:平滑速度/加速度(Vanilla JS)
- linux - wifi关闭时自动切换网络
- ios - Flutter Firebase 消息通知未获取有效负载
- javascript - 如何为 cURL 代码编写等效的 javascript?
- javascript - 在 react.js 中集成动态数据