feat(webpack): fix styling issues

app/index.html

@@ -18,10 +18,9 @@
   <link rel="apple-touch-icon" sizes="180x180" href="${require('../assets/ico/apple-touch-icon.png')}">
   <link rel="icon" type="image/png" sizes="32x32" href="${require('../assets/ico/favicon-32x32.png')}">
   <link rel="icon" type="image/png" sizes="16x16" href="${require('../assets/ico/favicon-16x16.png')}">
-  <link rel="manifest" href="${require('../assets/ico/manifest.json')}">
   <link rel="mask-icon" href="${require('../assets/ico/safari-pinned-tab.svg')}" color="#5bbad5">
-  <link rel="shortcut icon" href="${require('file-loader!../assets/ico/favicon.ico')}">
-  <meta name="msapplication-config" content="${require('file-loader!../assets/ico/browserconfig.xml')}">
+  <link rel="shortcut icon" href="${require('../assets/ico/favicon.ico')}">
+  <meta name="msapplication-config" content="${require('../assets/ico/browserconfig.xml')}">
   <meta name="theme-color" content="#ffffff">
 </head>
 

webpack.config.js

@@ -3,13 +3,13 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const WebpackBuildNotifierPlugin = require('webpack-build-notifier');
 const CleanTerminalPlugin = require('clean-terminal-webpack-plugin');
 const { ProvidePlugin } = require('webpack');
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
 
 const npmPackage = require('./package.json');
 module.exports = {
   entry: {
-    vendors: './app/vendors.js',
-    main: './app/__module.js',
+    main: './app/__module.js'
   },
   output: {
     filename: '[name].[hash].js',
@@ -37,17 +37,29 @@ module.exports = {
         ]
       },
       {
-        test: /\.(woff|woff2|eot|ttf|svg)$/,
-        loader: 'url-loader?limit=100000'
-      },
-      {
-        test: /\.(png|jpg|gif)$/,
+        test: /\.(woff|woff2|eot|ttf|svg|)$/,
         use: [
           {
-            loader: 'file-loader'
+            loader: 'url-loader',
+            options: { limit: 25000 }
           }
         ]
       },
+      {
+        test: /\.(ico|png|jpg|gif)$/,
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 25000
+            }
+          }
+        ]
+      },
+      {
+        test: /.xml$/,
+        use: 'file-loader'
+      },
       {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader?sourceMap']
@@ -61,10 +73,11 @@ module.exports = {
       templateParameters: {
         name: npmPackage.name,
         author: npmPackage.author
-      }
+      },
+      manifest: './assets/ico/manifest.json'
     }),
     new WebpackBuildNotifierPlugin({
-      title: 'My Project Webpack Build',
+      title: 'Portainer build',
       logo: path.resolve('./assets/favicon-32x32.png'),
       suppressSuccess: true
     }),
@@ -73,13 +86,27 @@ module.exports = {
       $: 'jquery',
       jQuery: 'jquery',
       'window.jQuery': 'jquery'
-      // angular: 'angular'
     }),
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
       // both options are optional
-      filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      filename: '[name].css',
+      chunkFilename: '[id].css',
+      sourceMap: true
+    }),
+    new CleanWebpackPlugin(['dist/public'])
+  ],
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        vendor: {
+          test: /node_modules/,
+          chunks: 'initial',
+          name: 'vendor',
+          priority: 10,
+          enforce: true
+        }
+      }
+    }
+  }
 };