chore(deps): update all bundling dependencies (#227)

Updates all webpack and babel related dependencies.

Replaces the `node.fs === "empty"` webpack option with `resolve.fallback.fs === false`.

Moves the `devtool` webpack option to a ternary expression after defining the base configuration because `""` is no longer a valid value for the `devtool` option.

Adds the `.vue` file extension to all import statements.

Renames a deterministic bundle ID reference to whatever webpack now came up with. I haven’t got a single clue why it changed it in the first place.

Author: kleinfreund

package-lock.json

@@ -7,19 +7,19 @@
   "scripts": {
     "start": "npm run watch",
     "watch": "npm-run-all --parallel watch:server watch:build",
-    "watch:build": "webpack --progress --colors --watch",
+    "watch:build": "webpack --progress --color --watch",
     "watch:server": "nodemon server.js",
     "test": "jest",
     "test:watch": "jest --watchAll",
-    "build": "webpack --progress --colors",
+    "build": "webpack --progress --color",
     "alex": "alex",
     "lint": "eslint --ext .js,.vue public",
     "lint:fix": "eslint --fix --ext .js,.vue public"
   },
   "dependencies": {
     "@azure/core-amqp": "^1.1.0",
     "@azure/event-hubs": "^5.0.1",
-    "@babel/runtime": "^7.6.2",
+    "@babel/runtime": "^7.12.5",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
     "azure-iothub": "^1.11.0",
     "body-parser": "^1.19.0",
@@ -46,20 +46,20 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "7.8.4",
-    "@babel/core": "7.8.4",
-    "@babel/plugin-syntax-jsx": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.8.3",
-    "@babel/plugin-transform-runtime": "7.8.3",
-    "@babel/preset-env": "7.8.4",
+    "@babel/cli": "7.12.10",
+    "@babel/core": "7.12.10",
+    "@babel/plugin-syntax-jsx": "7.12.1",
+    "@babel/plugin-transform-modules-commonjs": "7.12.1",
+    "@babel/plugin-transform-runtime": "7.12.10",
+    "@babel/preset-env": "7.12.11",
     "@babel/preset-stage-2": "7.8.3",
     "@types/jest": "25.1.2",
     "@vue/test-utils": "1.1.2",
     "alex": "8.1.1",
     "babel-jest": "25.1.0",
-    "babel-loader": "8.0.6",
+    "babel-loader": "8.2.2",
     "babel-minify-webpack-plugin": "0.3.1",
-    "css-loader": "3.4.2",
+    "css-loader": "5.0.1",
     "debug": "4.1.1",
     "eslint": "7.19.0",
     "eslint-plugin-vue": "7.5.0",
@@ -68,13 +68,13 @@
     "jest-axe": "3.3.0",
     "nodemon": "2.0.2",
     "npm-run-all": "4.1.5",
-    "style-loader": "1.1.3",
+    "style-loader": "2.0.0",
     "supertest": "4.0.2",
     "vue-jest": "4.0.0-rc.1",
     "vue-loader": "15.9.6",
     "vue-template-compiler": "2.6.12",
-    "webpack": "4.41.6",
-    "webpack-cli": "3.3.11",
+    "webpack": "5.19.0",
+    "webpack-cli": "4.4.0",
     "webpack-watch-server": "1.2.1",
     "whatwg-fetch": "3.0.0"
   },

package.json

@@ -25,7 +25,12 @@
     <div id="app"></div>
     <div id="dialog-root" class="modal-wrapper"></div>
 
-    <script src="/js/dist/vendors~main.bundle.js"></script>
+    <!--
+      For whatever unholy reason, webpack 5 changed the deterministic bundle ID
+      from “vendors~main” to “166” for this bundle
+      and I can’t be bothered to figure out how to revert that.
+    -->
+    <script src="/js/dist/166.bundle.js"></script>
     <script src="/js/dist/main.bundle.js"></script>
   </body>
 </html>

public/index.html

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-import FormFields from "./FormFields";
+import FormFields from "./FormFields.vue";
 
 export default {
   name: "CardForm",

public/js/components/CardForm.vue

@@ -119,7 +119,6 @@
 
 <script>
 import ElectricColorPicker from "./ElectricColorPicker.vue";
-import { saveDashboard } from "../lib/configuration.js";
 import templates from "../lib/templates.js";
 import createGuid from "../lib/guid.js";
 

public/js/components/DashboardSettings.vue

@@ -7,11 +7,11 @@
 </template>
 
 <script>
-import ButtonSettings from "./ButtonSettings";
-import LineChartSettings from "./LineChartSettings";
-import NumberSettings from "./NumberSettings";
-import StickerSettings from "./StickerSettings";
-import TextSettings from "./TextSettings";
+import ButtonSettings from "./ButtonSettings.vue";
+import LineChartSettings from "./LineChartSettings.vue";
+import NumberSettings from "./NumberSettings.vue";
+import StickerSettings from "./StickerSettings.vue";
+import TextSettings from "./TextSettings.vue";
 
 export default {
   name: "FormFields",

public/js/components/FormFields.vue

@@ -8,6 +8,7 @@
 
 <script>
 import Chartist from "chartist";
+
 import { evaluatePath } from "../lib/messagePropertyEvaluation.js";
 
 export default {

public/js/components/LineChartCard.vue

@@ -6,6 +6,7 @@
 
 <script>
 import marked from "marked";
+
 export default {
   name: "TextCard",
 

public/js/components/TextCard.vue

@@ -1,5 +1,5 @@
 import Vue from "vue";
-import App from "./components/App";
+import App from "./components/App.vue";
 import VueA11yDialog from "vue-a11y-dialog";
 import "chartist/dist/chartist.min.css";
 

public/js/main.js

@@ -1,29 +1,30 @@
 const webpack = require("webpack");
 const path = require("path");
 const VueLoaderPlugin = require("vue-loader/lib/plugin");
-const mode =
-  process.env.NODE_ENV === "development" ? "development" : "production";
 
-module.exports = {
+const mode = process.env.NODE_ENV === "development" ? "development" : "production";
+
+const baseConfiguration = {
   mode: mode,
   entry: "./public/js/main.js",
   output: {
     path: path.resolve(__dirname, "public", "js", "dist"),
     publicPath: "/dist/",
-    chunkFilename: "[name].bundle.js",
     filename: "[name].bundle.js"
   },
   optimization: {
     splitChunks: {
       chunks: "all"
     }
   },
-  devtool: mode === "production" ? "" : "eval-source-map",
   resolve: {
     extensions: [".js", ".vue"],
     alias: {
       vue$: "vue/dist/vue.esm.js",
       chartist$: "chartist/dist/chartist.min.js"
+    },
+    fallback: {
+      fs: false
     }
   },
   module: {
@@ -51,8 +52,9 @@ module.exports = {
     new webpack.DefinePlugin({
       SIMULATING: process.env.SIMULATING
     })
-  ],
-  node: {
-    fs: "empty"
-  }
+  ]
 };
+
+module.exports = mode === "production"
+  ? baseConfiguration
+  : { ...baseConfiguration, devtool: "eval-source-map" };