From 2fbc30ec2ec014152615f2f73b43417266661f52 Mon Sep 17 00:00:00 2001 From: David Meincke Date: Sun, 20 Mar 2022 12:19:19 +0100 Subject: [PATCH] update to webpack 5 --- .gitignore | 4 +- .vscode/launch.json | 22 +- BuildScripts/install-npm-packages.js | 13 - BuildScripts/output-production.js | 6 - BuildScripts/run-npm-script.js | 34 - BuildScripts/start-webpack-dev-server.js | 6 - dev-dist/index.html | 20 - dev-dist/main.js | 158 - index.html | 1 - package-lock.json | 20412 +++++++++++++++------ package.json | 43 +- prod-dist/index.html | 20 - prod-dist/main.js | 1 - tsconfig.json | 11 +- webpack.dev.js | 6 +- webpack.prod.js | 2 +- 16 files changed, 14895 insertions(+), 5864 deletions(-) delete mode 100644 BuildScripts/install-npm-packages.js delete mode 100644 BuildScripts/output-production.js delete mode 100644 BuildScripts/run-npm-script.js delete mode 100644 BuildScripts/start-webpack-dev-server.js delete mode 100644 dev-dist/index.html delete mode 100644 dev-dist/main.js delete mode 100644 prod-dist/index.html delete mode 100644 prod-dist/main.js diff --git a/.gitignore b/.gitignore index d46a462..7cc9371 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,5 @@ node_modules prod_dist -dev_dist \ No newline at end of file +dev_dist +prod-dist +dev-dist \ No newline at end of file diff --git a/.vscode/launch.json b/.vscode/launch.json index 4bd731e..5efbc3b 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -3,24 +3,24 @@ // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", - "configurations": [ + "configurations": [ { - "type": "node", - "request": "launch", + "command": "npm install", "name": "1. Install NPM packages (first time only)", - "program": "${workspaceFolder}/BuildScripts/install-npm-packages.js" + "request": "launch", + "type": "node-terminal" }, { - "type": "node", - "request": "launch", + "command": "npm run server", "name": "2. Start server (w. hot)", - "program": "${workspaceFolder}/BuildScripts/start-webpack-dev-server.js" + "request": "launch", + "type": "node-terminal" }, { - "type": "node", - "request": "launch", + "command": "npm run production", "name": "3. Build for production", - "program": "${workspaceFolder}/BuildScripts/output-production.js" - } + "request": "launch", + "type": "node-terminal" + }, ] } \ No newline at end of file diff --git a/BuildScripts/install-npm-packages.js b/BuildScripts/install-npm-packages.js deleted file mode 100644 index 8b9c5ac..0000000 --- a/BuildScripts/install-npm-packages.js +++ /dev/null @@ -1,13 +0,0 @@ -var exec = require('child_process').exec; - -console.log("Installing NPM packages"); - -exec('npm install', - function (error, stdout, stderr) { - if (error !== null) { - console.error("ERROR installing NPM packages", error); - } - else { - console.error("Successfully installed NPM packages", stdout, stderr); - } - }); \ No newline at end of file diff --git a/BuildScripts/output-production.js b/BuildScripts/output-production.js deleted file mode 100644 index 841ea22..0000000 --- a/BuildScripts/output-production.js +++ /dev/null @@ -1,6 +0,0 @@ -const open = require("open"); -const runScript = require("./run-npm-script"); - -runScript("production", () => { - console.log('Successful output to "prod-dist" folder'); -}); \ No newline at end of file diff --git a/BuildScripts/run-npm-script.js b/BuildScripts/run-npm-script.js deleted file mode 100644 index 5c9ee51..0000000 --- a/BuildScripts/run-npm-script.js +++ /dev/null @@ -1,34 +0,0 @@ -const npm = require("npm"); - -module.exports = function(scriptName, onSuccess, onError) { - - npm.load(function(err) { - console.log('Running npm script: "' + scriptName + '"'); - npm.commands.run([scriptName], function(error, data) { - - if (error) { - console.error('Npm script: "' + scriptName + '" error', error); - if (data) { - console.log(data); - } - - if (onError) { - onError(error); - } - } - else { - console.log('Npm script: "' + scriptName + '" ran successfully'); - - if (onSuccess) { - onSuccess(data); - } - } - - }); - - npm.on('log', function(message) { - console.log('Npm script: "' + scriptName + '" log', message); - }); - }); - -} \ No newline at end of file diff --git a/BuildScripts/start-webpack-dev-server.js b/BuildScripts/start-webpack-dev-server.js deleted file mode 100644 index ed61ec8..0000000 --- a/BuildScripts/start-webpack-dev-server.js +++ /dev/null @@ -1,6 +0,0 @@ -const open = require("open"); -const runScript = require("./run-npm-script"); - -runScript("server", () => { - open("http://localhost:8020"); -}); \ No newline at end of file diff --git a/dev-dist/index.html b/dev-dist/index.html deleted file mode 100644 index b5f68ce..0000000 --- a/dev-dist/index.html +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - Title - - - - - - - - - - - \ No newline at end of file diff --git a/dev-dist/main.js b/dev-dist/main.js deleted file mode 100644 index 087625c..0000000 --- a/dev-dist/main.js +++ /dev/null @@ -1,158 +0,0 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); -/******/ } -/******/ }; -/******/ -/******/ // define __esModule on exports -/******/ __webpack_require__.r = function(exports) { -/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { -/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); -/******/ } -/******/ Object.defineProperty(exports, '__esModule', { value: true }); -/******/ }; -/******/ -/******/ // create a fake namespace object -/******/ // mode & 1: value is a module id, require it -/******/ // mode & 2: merge all properties of value into the ns -/******/ // mode & 4: return value when already ns object -/******/ // mode & 8|1: behave like require -/******/ __webpack_require__.t = function(value, mode) { -/******/ if(mode & 1) value = __webpack_require__(value); -/******/ if(mode & 8) return value; -/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; -/******/ var ns = Object.create(null); -/******/ __webpack_require__.r(ns); -/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); -/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); -/******/ return ns; -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "/"; -/******/ -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = "./App/boot.ts"); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ "./App/app.html": -/*!**********************!*\ - !*** ./App/app.html ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports) { - -eval("// Module\nvar code = \"
App running
\";\n// Exports\nmodule.exports = code;\n\n//# sourceURL=webpack:///./App/app.html?"); - -/***/ }), - -/***/ "./App/app.less": -/*!**********************!*\ - !*** ./App/app.less ***! - \**********************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -eval("var api = __webpack_require__(/*! ../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n var content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./app.less */ \"./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./App/app.less\");\n\n content = content.__esModule ? content.default : content;\n\n if (typeof content === 'string') {\n content = [[module.i, content, '']];\n }\n\nvar options = {};\n\noptions.insert = \"head\";\noptions.singleton = false;\n\nvar update = api(content, options);\n\n\n\nmodule.exports = content.locals || {};\n\n//# sourceURL=webpack:///./App/app.less?"); - -/***/ }), - -/***/ "./App/boot.ts": -/*!*********************!*\ - !*** ./App/boot.ts ***! - \*********************/ -/*! no exports provided */ -/***/ (function(module, __webpack_exports__, __webpack_require__) { - -"use strict"; -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _app_less__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./app.less */ \"./App/app.less\");\n/* harmony import */ var _app_less__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_app_less__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _app_html__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./app.html */ \"./App/app.html\");\n/* harmony import */ var _app_html__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_app_html__WEBPACK_IMPORTED_MODULE_1__);\n\r\n\r\nvar appEle = document.createElement(\"app-root\");\r\nappEle.innerHTML = _app_html__WEBPACK_IMPORTED_MODULE_1___default.a;\r\ndocument.body.appendChild(appEle);\r\n\n\n//# sourceURL=webpack:///./App/boot.ts?"); - -/***/ }), - -/***/ "./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./App/app.less": -/*!***************************************************************************************************!*\ - !*** ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./App/app.less ***! - \***************************************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -eval("// Imports\nvar ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.i, \"body {\\n background: aqua;\\n}\\n\", \"\"]);\n// Exports\nmodule.exports = exports;\n\n\n//# sourceURL=webpack:///./App/app.less?./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js"); - -/***/ }), - -/***/ "./node_modules/css-loader/dist/runtime/api.js": -/*!*****************************************************!*\ - !*** ./node_modules/css-loader/dist/runtime/api.js ***! - \*****************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -eval("\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = cssWithMappingToString(item, useSourceMap);\n\n if (item[2]) {\n return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n }\n\n return content;\n }).join('');\n }; // import a list of modules into the list\n // eslint-disable-next-line func-names\n\n\n list.i = function (modules, mediaQuery, dedupe) {\n if (typeof modules === 'string') {\n // eslint-disable-next-line no-param-reassign\n modules = [[null, modules, '']];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var i = 0; i < this.length; i++) {\n // eslint-disable-next-line prefer-destructuring\n var id = this[i][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _i = 0; _i < modules.length; _i++) {\n var item = [].concat(modules[_i]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (mediaQuery) {\n if (!item[2]) {\n item[2] = mediaQuery;\n } else {\n item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n var cssMapping = item[3];\n\n if (!cssMapping) {\n return content;\n }\n\n if (useSourceMap && typeof btoa === 'function') {\n var sourceMapping = toComment(cssMapping);\n var sourceURLs = cssMapping.sources.map(function (source) {\n return \"/*# sourceURL=\".concat(cssMapping.sourceRoot || '').concat(source, \" */\");\n });\n return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n }\n\n return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n // eslint-disable-next-line no-undef\n var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n return \"/*# \".concat(data, \" */\");\n}\n\n//# sourceURL=webpack:///./node_modules/css-loader/dist/runtime/api.js?"); - -/***/ }), - -/***/ "./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js": -/*!****************************************************************************!*\ - !*** ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js ***! - \****************************************************************************/ -/*! no static exports found */ -/***/ (function(module, exports, __webpack_require__) { - -"use strict"; -eval("\n\nvar isOldIE = function isOldIE() {\n var memo;\n return function memorize() {\n if (typeof memo === 'undefined') {\n // Test for IE <= 9 as proposed by Browserhacks\n // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n // Tests for existence of standard globals is to allow style-loader\n // to operate correctly into non-standard environments\n // @see https://github.com/webpack-contrib/style-loader/issues/177\n memo = Boolean(window && document && document.all && !window.atob);\n }\n\n return memo;\n };\n}();\n\nvar getTarget = function getTarget() {\n var memo = {};\n return function memorize(target) {\n if (typeof memo[target] === 'undefined') {\n var styleTarget = document.querySelector(target); // Special case to return head of iframe instead of iframe itself\n\n if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n try {\n // This will throw an exception if access to iframe is blocked\n // due to cross-origin restrictions\n styleTarget = styleTarget.contentDocument.head;\n } catch (e) {\n // istanbul ignore next\n styleTarget = null;\n }\n }\n\n memo[target] = styleTarget;\n }\n\n return memo[target];\n };\n}();\n\nvar stylesInDom = [];\n\nfunction getIndexByIdentifier(identifier) {\n var result = -1;\n\n for (var i = 0; i < stylesInDom.length; i++) {\n if (stylesInDom[i].identifier === identifier) {\n result = i;\n break;\n }\n }\n\n return result;\n}\n\nfunction modulesToDom(list, options) {\n var idCountMap = {};\n var identifiers = [];\n\n for (var i = 0; i < list.length; i++) {\n var item = list[i];\n var id = options.base ? item[0] + options.base : item[0];\n var count = idCountMap[id] || 0;\n var identifier = \"\".concat(id, \" \").concat(count);\n idCountMap[id] = count + 1;\n var index = getIndexByIdentifier(identifier);\n var obj = {\n css: item[1],\n media: item[2],\n sourceMap: item[3]\n };\n\n if (index !== -1) {\n stylesInDom[index].references++;\n stylesInDom[index].updater(obj);\n } else {\n stylesInDom.push({\n identifier: identifier,\n updater: addStyle(obj, options),\n references: 1\n });\n }\n\n identifiers.push(identifier);\n }\n\n return identifiers;\n}\n\nfunction insertStyleElement(options) {\n var style = document.createElement('style');\n var attributes = options.attributes || {};\n\n if (typeof attributes.nonce === 'undefined') {\n var nonce = true ? __webpack_require__.nc : undefined;\n\n if (nonce) {\n attributes.nonce = nonce;\n }\n }\n\n Object.keys(attributes).forEach(function (key) {\n style.setAttribute(key, attributes[key]);\n });\n\n if (typeof options.insert === 'function') {\n options.insert(style);\n } else {\n var target = getTarget(options.insert || 'head');\n\n if (!target) {\n throw new Error(\"Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.\");\n }\n\n target.appendChild(style);\n }\n\n return style;\n}\n\nfunction removeStyleElement(style) {\n // istanbul ignore if\n if (style.parentNode === null) {\n return false;\n }\n\n style.parentNode.removeChild(style);\n}\n/* istanbul ignore next */\n\n\nvar replaceText = function replaceText() {\n var textStore = [];\n return function replace(index, replacement) {\n textStore[index] = replacement;\n return textStore.filter(Boolean).join('\\n');\n };\n}();\n\nfunction applyToSingletonTag(style, index, remove, obj) {\n var css = remove ? '' : obj.media ? \"@media \".concat(obj.media, \" {\").concat(obj.css, \"}\") : obj.css; // For old IE\n\n /* istanbul ignore if */\n\n if (style.styleSheet) {\n style.styleSheet.cssText = replaceText(index, css);\n } else {\n var cssNode = document.createTextNode(css);\n var childNodes = style.childNodes;\n\n if (childNodes[index]) {\n style.removeChild(childNodes[index]);\n }\n\n if (childNodes.length) {\n style.insertBefore(cssNode, childNodes[index]);\n } else {\n style.appendChild(cssNode);\n }\n }\n}\n\nfunction applyToTag(style, options, obj) {\n var css = obj.css;\n var media = obj.media;\n var sourceMap = obj.sourceMap;\n\n if (media) {\n style.setAttribute('media', media);\n } else {\n style.removeAttribute('media');\n }\n\n if (sourceMap && btoa) {\n css += \"\\n/*# sourceMappingURL=data:application/json;base64,\".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), \" */\");\n } // For old IE\n\n /* istanbul ignore if */\n\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n while (style.firstChild) {\n style.removeChild(style.firstChild);\n }\n\n style.appendChild(document.createTextNode(css));\n }\n}\n\nvar singleton = null;\nvar singletonCounter = 0;\n\nfunction addStyle(obj, options) {\n var style;\n var update;\n var remove;\n\n if (options.singleton) {\n var styleIndex = singletonCounter++;\n style = singleton || (singleton = insertStyleElement(options));\n update = applyToSingletonTag.bind(null, style, styleIndex, false);\n remove = applyToSingletonTag.bind(null, style, styleIndex, true);\n } else {\n style = insertStyleElement(options);\n update = applyToTag.bind(null, style, options);\n\n remove = function remove() {\n removeStyleElement(style);\n };\n }\n\n update(obj);\n return function updateStyle(newObj) {\n if (newObj) {\n if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) {\n return;\n }\n\n update(obj = newObj);\n } else {\n remove();\n }\n };\n}\n\nmodule.exports = function (list, options) {\n options = options || {}; // Force single-tag solution on IE6-9, which has a hard limit on the # of