Текущее поведение
Когда я пытаюсь запустить свой сервер разработки Webpack, компиляция завершается неудачно, и я получаю следующий вывод:
...
[0] multi (webpack)-dev-server/client?http://localhost:8080 whatwg-fetch 40 bytes {polyfills} [built]
[2] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/allsymbols/main.js 40 bytes {allsymbols} [built]
[3] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/balloons/main.js 40 bytes {balloons} [built]
[4] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/camera/main.js 40 bytes {camera} [built]
[5] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/clustering/main.js 40 bytes {clustering} [built]
[6] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/complexstroking/main.js 40 bytes {complexstroking} [built]
[7] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/constructivegeometry/main.js 40 bytes {constructivegeometry} [built]
[8] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/createedit/main.js 40 bytes {createedit} [built]
[9] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/data/main.js 40 bytes {data} [built]
[10] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/dataformats/main.js 40 bytes {dataformats} [built]
[11] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/dualmap/main.js 40 bytes {dualmap} [built]
[12] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/ecdis/main.js 40 bytes {ecdis} [built]
[13] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/extrudedshapes/main.js 40 bytes {extrudedshapes} [built]
[14] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/firstsample/main.js 40 bytes {firstsample} [built]
[15] multi (webpack)-dev-server/client?http://localhost:8080 ./samples/googleimage/main.js 40 bytes {googleimage} [built]
+ 1102 hidden modules
WARNING in new Worker() will only be bundled if passed a String.
@ ./lib/luciad/view/strategy/PhotonViewPaintingStrategy.js 28:0-78 104:35-58 111:49-72
@ ./lib/luciad/view/WebGLMap.js
@ ./samples/reprojection/main.js
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
ERROR in Error: HTML5 Canvas is not supported
Child HtmlWebpackCompiler:
32 assets
Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
Entrypoint HtmlWebpackPlugin_1 = __child-HtmlWebpackPlugin_1
Entrypoint HtmlWebpackPlugin_2 = __child-HtmlWebpackPlugin_2
Entrypoint HtmlWebpackPlugin_3 = __child-HtmlWebpackPlugin_3
Entrypoint HtmlWebpackPlugin_4 = __child-HtmlWebpackPlugin_4
Entrypoint HtmlWebpackPlugin_5 = __child-HtmlWebpackPlugin_5
Entrypoint HtmlWebpackPlugin_6 = __child-HtmlWebpackPlugin_6
Entrypoint HtmlWebpackPlugin_7 = __child-HtmlWebpackPlugin_7
Entrypoint HtmlWebpackPlugin_8 = __child-HtmlWebpackPlugin_8
Entrypoint HtmlWebpackPlugin_9 = __child-HtmlWebpackPlugin_9
Entrypoint HtmlWebpackPlugin_10 = __child-HtmlWebpackPlugin_10
Entrypoint HtmlWebpackPlugin_11 = __child-HtmlWebpackPlugin_11
Entrypoint HtmlWebpackPlugin_12 = __child-HtmlWebpackPlugin_12
Entrypoint HtmlWebpackPlugin_13 = __child-HtmlWebpackPlugin_13
Entrypoint HtmlWebpackPlugin_14 = __child-HtmlWebpackPlugin_14
Entrypoint HtmlWebpackPlugin_15 = __child-HtmlWebpackPlugin_15
Entrypoint HtmlWebpackPlugin_16 = __child-HtmlWebpackPlugin_16
Entrypoint HtmlWebpackPlugin_17 = __child-HtmlWebpackPlugin_17
Entrypoint HtmlWebpackPlugin_18 = __child-HtmlWebpackPlugin_18
Entrypoint HtmlWebpackPlugin_19 = __child-HtmlWebpackPlugin_19
Entrypoint HtmlWebpackPlugin_20 = __child-HtmlWebpackPlugin_20
Entrypoint HtmlWebpackPlugin_21 = __child-HtmlWebpackPlugin_21
Entrypoint HtmlWebpackPlugin_22 = __child-HtmlWebpackPlugin_22
Entrypoint HtmlWebpackPlugin_23 = __child-HtmlWebpackPlugin_23
Entrypoint HtmlWebpackPlugin_24 = __child-HtmlWebpackPlugin_24
Entrypoint HtmlWebpackPlugin_25 = __child-HtmlWebpackPlugin_25
Entrypoint HtmlWebpackPlugin_26 = __child-HtmlWebpackPlugin_26
Entrypoint HtmlWebpackPlugin_27 = __child-HtmlWebpackPlugin_27
Entrypoint HtmlWebpackPlugin_28 = __child-HtmlWebpackPlugin_28
Entrypoint HtmlWebpackPlugin_29 = __child-HtmlWebpackPlugin_29
Entrypoint HtmlWebpackPlugin_30 = __child-HtmlWebpackPlugin_30
Entrypoint HtmlWebpackPlugin_31 = __child-HtmlWebpackPlugin_31
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/allsymbols/main.js] 9.85 KiB {HtmlWebpackPlugin_0} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/balloons/main.js] 1.84 KiB {HtmlWebpackPlugin_1} [built] [./node_modules/html-webpack-plugin/lib/loader.js!./samples/camera/main.js] 5.5 KiB {HtmlWebpackPlugin_2} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/clustering/main.js] 4.41 KiB {HtmlWebpackPlugin_3} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/complexstroking/main.js] 2.94 KiB {HtmlWebpackPlugin_4} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/constructivegeometry/main.js] 5.21 KiB {HtmlWebpackPlugin_5} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/createedit/main.js] 7.27 KiB {HtmlWebpackPlugin_6} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/data/main.js] 2.87 KiB {HtmlWebpackPlugin_7} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/dataformats/main.js] 34.4 KiB {HtmlWebpackPlugin_8} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/dualmap/main.js] 8.75 KiB {HtmlWebpackPlugin_9} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/ecdis/main.js] 1.66 KiB {HtmlWebpackPlugin_10} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/extrudedshapes/main.js] 3.81 KiB {HtmlWebpackPlugin_11} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/firstsample/main.js] 3.5 KiB {HtmlWebpackPlugin_12} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/googleimage/main.js] 1.94 KiB {HtmlWebpackPlugin_13} [built]
[./node_modules/html-webpack-plugin/lib/loader.js!./samples/googlemaps/main.js] 2.21 KiB {HtmlWebpackPlugin_14} [built]
+ 1037 hidden modules
WARNING in new Worker() will only be bundled if passed a String.
@ ./lib/luciad/view/strategy/PhotonViewPaintingStrategy.js 28:0-78 104:35-58 111:49-72
@ ./lib/luciad/view/WebGLMap.js
@ ./node_modules/html-webpack-plugin/lib/loader.js!./samples/reprojection/main.js
i ｢wdm｣: Failed to compile.
Конфигурация
У меня следующая структура папок: 
Моя package.json содержит следующую настройку:
{
"name": "ria-webpack",
"version": "1.0.0",
"description": "Sample project demonstrating RIA integration with webpack",
"main": "index.js",
"author": "Luciad NV",
"license": "MIT",
"dependencies": {
"@babel/polyfill": "^7.4.0",
"whatwg-fetch": "^3.0.0"
},
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"babel-loader": "^8.0.5",
"clean-webpack-plugin": "^2.0.1",
"copy-webpack-plugin": "^5.0.2",
"cross-env": "^5.2.0",
"css-loader": "^2.1.1",
"exports-loader": "^0.7.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^3.0.1",
"glob": "^7.1.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0-beta.5",
"raw-loader": "^2.0.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1",
"worker-plugin": "^3.1.0"
},
"scripts": {
"build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=development webpack --config webpack.config.js",
"build:prod": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=production webpack --config webpack.config.js",
"start": "cross-env NODE_OPTIONS=--max_old_space_size=8192 NODE_ENV=devserver webpack-dev-server --config webpack.config.js"
}
}
Моя webpack.config.json содержит следующую настройку:
const isDevserver = process.env.NODE_ENV === 'devserver';
const isDevelopment = process.env.NODE_ENV !== 'production';
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const WorkerPlugin = require('worker-plugin');
const glob = require("glob");
const files = glob.sync("./samples/**/main.js", {nodir : true}).reduce((accumulator, fileName) => {
const sampleName = path.basename(path.dirname(fileName));
const relativeFileName = path.relative("./samples", fileName);
accumulator.entry[sampleName] = fileName;
accumulator.plugins.push(new HtmlWebPackPlugin({
template: fileName,
chunks: ['polyfills', sampleName],
filename: relativeFileName
}));
return accumulator;
}, {
entry : {
polyfills : ["whatwg-fetch"]
},
plugins : [...(isDevserver ? [] : [new CleanWebpackPlugin({})]),
new WorkerPlugin({
// use "self" as the global object when receiving hot updates.
globalObject: 'self' // <-- this is the default value
}),
new CopyPlugin([{
from: 'samples/resources',
to: 'resources'
}])]
});
module.exports = {
mode: isDevelopment ? 'development' : 'production',
entry: files.entry,
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.txt$/i,
loader: 'raw-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ['to-string-loader'].concat(ExtractTextPlugin.extract({
use: [
{
loader: 'css-loader', options: {
minimize: true,
sourceMap: true
}
}
]
}))
},
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: !isDevelopment }
}
]
},
{
test: require.resolve('./samples/template/init.js'),
use: 'exports-loader?resetMapSize,disableUI,UILoaded,queryParameters,bootstrapUI'
},
{
test: /\.(woff(2)?|ttf|eot|svg|png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}]
}
]
},
resolve: {
extensions: ['.js', '.css'],
modules: [
path.resolve(__dirname, 'samples'),
path.resolve(__dirname, 'lib'),
'node_modules'
]
},
devtool: "source-map",
output: {
filename: isDevelopment ? '[name].js' : '[name].[hash].js'
},
optimization: {
splitChunks: {
chunks: 'all'
}
},
plugins: files.plugins
};
Папка lib содержит только библиотеку JavaScript LuciadRIA, к которой мне, к сожалению, здесь не разрешено делиться.
Папка с примерами содержит в основном подпапки, содержащие не менее index.html и a main.js.
Один из самых простых примеров имеет следующий HTML ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<title>Balloon</title>
<link href="../../samples/template/css/sample-single.css" rel="stylesheet" type="text/css">
</head>
<body class="categorymixed allowcanvas allowwebgl allow3D">
<div id="map">
<div class="logo" id="logo"></div>
<div class="topcenter" id="toasts"></div>
<div id="onmap"></div>
<div id="topleftbuttons">
<a class="btn btn-default btn-map homepage-button" href="https://hexagon.com/" role="button" target="_blank" title="Homepage">
<span class="lcdIcon lcdIconLogoHexagon-bug"></span>
</a>
<a class="btn btn-default btn-map info-button" role="button" title="More info">
<span class="glyphicon"></span>
</a>
<a class="btn btn-default btn-map fullscreen-button" role="button" title="Fullscreen">
<span class="glyphicon"></span>
</a>
</div>
</div>
<div id="infopanel">
<div id="infopanel-content">
<h1>Balloon</h1>
<p>
The Balloon sample illustrates the use of balloon widgets on the map.
The contents of a balloon can be specified with a string or with valid HTML.
</p>
<p>
Add balloons to the map by using the
<code>showBalloon()</code>
method. Remove them from the map by calling
<code>hideBalloon()</code>
.
</p>
<p>
The contents of a balloon can be specified with a string or with valid HTML.
</p>
<p>
Balloons can be anchored to an object (for instance, a Feature from the model which is visualized by a
FeatureLayer). Updates of the location of the feature cause the balloon to update as well.
</p>
<p>
Balloons are styled with the
<code>samples/common/balloon/luciad-balloon.css</code>
style-sheet. This stylesheet may be replaced with your own custom stylesheet.
</p>
</div>
</div>
<div id="messageoverlay">
<h3>
<span id="messageoverlaytext"></span>
<br>
<a href="#" id="messageoverlaylink"></a>
</h3>
</div>
</body>
</html>
И имеет следующий код JS:
import PaintRepresentation from "luciad/view/PaintRepresentation";
import LayerConfigUtil from "../common/LayerConfigUtil";
import sampleTemplate from "../template/sample";
var map = sampleTemplate.makeMap();
var smallWorldLayer = LayerConfigUtil.addWorldLayer(map);
// CITIES
var citiesLayer = LayerConfigUtil.addCitiesLayer(map);
citiesLayer.setPaintRepresentationVisible(PaintRepresentation.LABEL, false);
LayerConfigUtil.addLonLatGridLayer(map);
//#snippet ballooncontentprovider
function contentProvider(prefix, property) {
return function(o) {
return prefix + (o.properties[property] || "no property");
};
}
//#endsnippet ballooncontentprovider
// Create a balloon Content provider for the world layer
smallWorldLayer.balloonContentProvider = contentProvider("COUNTRY: ", "name");
//#snippet ballooncontentprovider
// Create a balloon content provider for the cities layer, which creates HTML
// for cities with more than 1.000.000 inhabitants and uses the "default"
// content provider if not.
var citiesDefaultProvider = contentProvider("CITY: ", "CITY");
citiesLayer.balloonContentProvider = function(o) {
var cityProps = o.properties, node;
if (cityProps.TOT_POP > 1000000) {
node = document.createElement("ul", {});
for (var key in cityProps) {
if (cityProps.hasOwnProperty(key) && key !== "uid") {
var item = document.createElement("li");
item.innerHTML = key + ": " + cityProps[key];
node.appendChild(item);
}
}
return node;
} else {
return citiesDefaultProvider(o);
}
};
//#endsnippet ballooncontentprovider
//fit on the cities layer
var queryFinishedHandle = citiesLayer.workingSet.on("QueryFinished", function() {
//#snippet layerFit
map.mapNavigator.fit({
bounds: citiesLayer.bounds,
animate: true
});
//#endsnippet layerFit
queryFinishedHandle.remove();
});
Среда
версия веб-пакета: 4.40.2
Версия Node.js: 10.16.3
Операционная система: Windows 10
Есть идеи, что происходит или как решить эту проблему?