Allow the favicon to be cached

The favicon is currently loaded directly by url.  This commit changes it
to be loaded by file-loader. Note, the default vue webpack file loader
doesn't support ico file types (because it seems to expect to use a png
here), so add that to the file loader config.

This allows bmcweb [1] to provide caching headers for the favicon, and
avoid downloading a new favicon on every refresh.

Tested: Webui-vue loads, favicon in the network panel loads properly.

[1] https://gerrit.openbmc.org/c/openbmc/bmcweb/+/70644

Change-Id: I27e5b459ff8822294ac9273220111e9944e8d1e5
Signed-off-by: Ed Tanous <ed@tanous.net>
diff --git a/public/index.html b/public/index.html
index c355ece..e96efda 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="<%= require('./favicon.ico') %>">
     <title>OpenBMC Web UI</title>
   </head>
   <body>
diff --git a/vue.config.js b/vue.config.js
index bd22674..e66d5d1 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -61,6 +61,14 @@
       .rule('vue')
       .use('vue-svg-inline-loader')
       .loader('vue-svg-inline-loader');
+    config.module
+      .rule('ico')
+      .test(/\.ico$/)
+      .use('file-loader')
+      .loader('file-loader')
+      .options({
+        name: '[name].[contenthash:8].[ext]',
+      });
   },
   configureWebpack: (config) => {
     config.plugins.push(