Combining big set of layers with npm+webpack and OpenLayers

Question

I have a really big set of layers in OpenLayers 5. I wonder how to split large source files into smaller sets and combine it via webpack.

style.js file about 30 items e.g.:

var s_al_timeout = function(feature, resolution) { var fGet = parseFloat(feature.get('last_read_timeout')); ... text: new ol.style.Text({ ... }) })]; },

vector source.js file about 30 items e.g.:

var vS_alarm_timeout = new ol.source.Vector({ loader: function(extent) { $.ajax('/wfs_ant',{ type: 'GET', data: { service: 'WFS', ... bbox: extent.join(',') + ',EPSG:3857' }, }).done(ldFe_alarm_timeout); }, strategy: ol.loadingstrategy.bbox }); var ldFe_alarm_timeout = function(response) { formatWFS = new ol.format.WFS(); fT_alarm_timeout = formatWFS.readFeatures(response); vS_alarm_timeout.addFeatures(fT_alarm_timeout); }; function refresh_alarm_timeout(){ vS_alarm_timeout.clear(true); vS_alarm_timeout.addFeatures(fT_alarm_timeout); }

And how to use $.ajax loader in webpack? (Loading jquery, good tutorial for ajax: https://alexomara.com/blog/webpack-and-jquery-include-only-the-parts-you-need/)

Popup file also many lines code. Basic code file (combine map and layers with source vector and style file).

I try with npm and webpack but I don't know how to import these smaller files... I seek tips or examples.

Trying split code into: ./script/source.js + ./script/style.js

in main.js:

require ('./scripts/source'); 
require ('./scripts/style');

and in webpack.config.js add: entry: ['./main.js', './scripts/source.js', './scripts/style.js']

But no luck Uncaught ReferenceError: vS_alarm_timeout is not defined and vS_alarm_timeout is name of the source layer in main.js.

• PolyGeo: You appear to have created two accounts which inevitably leads to a frustrating experience for you, potential answerers and reviewers so please follow these instructions ASAP to merge your accounts.

Answer 1

My solution is communication between pieces of code via import and export. It's so simple and work very good.

Example:

main.js

import {v_vector_layer1} from './source/wfs/vector_layer1';

vector_layer1.js

export var v_vector_layer1;

• PolyGeo: You appear to have created two accounts which inevitably leads to a frustrating experience for you, potential answerers and reviewers so please follow these instructions ASAP to merge your accounts.