Update vue config to include webpack bundling tweak

Not being used, but if enabled will put each node_modules package into their own JS file.

Combined with vue ui and then Tasks > Build > Analyzer > Run Task, helps determined where the largest dependencies are.

src/main.ts

@@ -1,11 +1,13 @@
 import Vue from 'vue';
 import App from './App.vue';
-import BootstrapVue from 'bootstrap-vue';
+// Only import the layout-related controls.
+import { LayoutPlugin } from 'bootstrap-vue';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap-vue/dist/bootstrap-vue.css';
 import World from './models/World';
 
-Vue.use(BootstrapVue);
+// Reference the plugin(s) we imported above, here.
+Vue.use(LayoutPlugin);
 
 Vue.config.productionTip = false;
 Vue.prototype.$world = new World();

vue.config.js

@@ -1,6 +1,31 @@
 module.exports = {
-  lintOnSave: false,
-  publicPath: process.env.NODE_ENV === 'production'
-    ? '/' + process.env.CI_PROJECT_NAME + '/'
-    : '/'
+	lintOnSave: false,
+	publicPath: process.env.NODE_ENV === 'production'
+		? '/' + process.env.CI_PROJECT_NAME + '/'
+		: '/',
+	configureWebpack: {
+		// This entire configuration section can be removed to use defaults.
+		// Otherwise this configures webpack to use a JS file for each package.
+		/*optimization: {
+			runtimeChunk: 'single',
+			splitChunks: {
+				chunks: 'all',
+				maxInitialRequests: Infinity,
+				minSize: 0,
+				cacheGroups: {
+					vendor: {
+						test: /[\\/]node_modules[\\/]/,
+						name(module) {
+							// get the name. E.g. node_modules/packageName/not/this/part.js
+							// or node_modules/packageName
+							const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
+
+							// npm package names are URL-safe, but some servers don't like @ symbols
+							return `npm.${packageName.replace('@', '')}`;
+						}
+					}
+				}
+			}
+		}*/
+	}
 }