Update to webpack v5

Closes #10

package.json

@@ -51,13 +51,12 @@
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^6.1.0",
     "globby": "^11.0.2",
-    "hard-source-webpack-plugin": "^0.13.1",
-    "html-webpack-plugin": "^4.5.2",
+    "html-webpack-plugin": "^5.2.0",
     "mini-css-extract-plugin": "^1.3.8",
     "nodecg-cli": "^7.0.0",
     "npm-run-all": "^4.1.5",
     "sass": "^1.32.8",
-    "sass-loader": "^10.1.1",
+    "sass-loader": "^11.0.1",
     "trash-cli": "^4.0.0",
     "ts-loader": "^8.0.17",
     "tsconfig-paths-webpack-plugin": "^3.3.0",
@@ -75,7 +74,7 @@
     "vuex": "^3.6.2",
     "vuex-class": "^0.3.2",
     "vuex-module-decorators": "^1.0.1",
-    "webpack": "^4.46.0",
+    "webpack": "^5.23.0",
     "webpack-cli": "^4.5.0",
     "webpack-livereload-plugin": "^3.0.0"
   },

src/dashboard/example/main.vue

@@ -1,6 +1,8 @@
 <template>
   <v-app>
     {{ text }}
+    <br><br>
+    <img src="./image.png">
   </v-app>
 </template>
 

src/graphics/example/main.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     {{ text }}
+    <br><br>
+    <img src="./image.png">
   </div>
 </template>
 

webpack.config.js

@@ -3,7 +3,6 @@ const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
-const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
 const LiveReloadPlugin = require('webpack-livereload-plugin');
 const TsConfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const globby = require('globby');
@@ -37,7 +36,6 @@ const config = (name) => {
   }
   plugins = plugins.concat(
     [
-      new HardSourceWebpackPlugin(),
       new VueLoaderPlugin(),
       ...Object.keys(entry).map(
         (entryName) =>
@@ -132,33 +130,30 @@ const config = (name) => {
         },
         {
           test: /\.(woff(2)?|ttf|eot)$/,
-          loader: 'file-loader',
-          options: {
-            name: 'font/[name].[ext]',
-            esModule: false,
+          type: 'asset/resource',
+          generator: {
+            filename: 'font/[name][ext]',
           },
         },
         {
           test: /\.svg?$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'font/[name][ext]',
+          },
           include: [
             path.resolve(__dirname, `src/${name}/_misc/fonts`),
           ],
-          loader: 'file-loader',
-          options: {
-            name: 'font/[name].[ext]',
-            esModule: false,
-          },
         },
         {
           test: /\.(png|svg)?$/,
+          type: 'asset/resource',
+          generator: {
+            filename: 'img/[name]-[contenthash][ext]',
+          },
           exclude: [
             path.resolve(__dirname, `src/${name}/_misc/fonts`),
           ],
-          loader: 'file-loader',
-          options: {
-            name: 'img/[name]-[contenthash].[ext]',
-            esModule: false,
-          },
         },
         {
           test: /\.tsx?$/,
@@ -172,13 +167,14 @@ const config = (name) => {
     },
     plugins,
     optimization: (isProd) ? {
+      // v5 migration guide says to reconsider this, so maybe change in the future?
       splitChunks: {
         chunks: 'all',
         cacheGroups: {
           common: {
             minChunks: 2,
           },
-          vendors: false,
+          defaultVendors: false,
           default: false,
         },
       },