feat: make flavor webpack dependecies optional

packages/webpack5/package.json

@@ -18,7 +18,6 @@
 	},
 	"dependencies": {
 		"@babel/core": "^7.0.0",
-		"@pmmmwh/react-refresh-webpack-plugin": "^0.4.0",
 		"acorn": "^8.0.0",
 		"acorn-stage3": "^4.0.0",
 		"babel-loader": "^8.0.0",
@@ -45,7 +44,6 @@
 		"terser-webpack-plugin": "^5.0.0",
 		"ts-dedent": "^2.0.0",
 		"ts-loader": "^9.0.0",
-		"vue-loader": "^15.0.0",
 		"webpack": "^5.30.0 <= 5.50.0 || ^5.51.2",
 		"webpack-bundle-analyzer": "^4.0.0",
 		"webpack-chain": "^6.0.0",
@@ -69,11 +67,19 @@
 		"typescript": "4.4.2"
 	},
 	"peerDependencies": {
-		"nativescript-vue-template-compiler": "^2.8.1"
+		"@pmmmwh/react-refresh-webpack-plugin": "^0.4.0",
+		"nativescript-vue-template-compiler": "^2.8.1",
+		"vue-loader": "^15.0.0"
 	},
 	"peerDependenciesMeta": {
+		"@pmmmwh/react-refresh-webpack-plugin": {
+			"optional": true
+		},
 		"nativescript-vue-template-compiler": {
 			"optional": true
+		},
+		"vue-loader": {
+			"optional": true
 		}
 	}
 }

packages/webpack5/src/configuration/vue.ts

@@ -1,4 +1,4 @@
-import { VueLoaderPlugin } from 'vue-loader';
+import type { VueLoaderPlugin } from 'vue-loader';
 import { merge } from 'webpack-merge';
 import Config from 'webpack-chain';
 import fs from 'fs';
@@ -9,6 +9,10 @@ import { env as _env, IWebpackEnv } from '../index';
 import { error } from '../helpers/log';
 import base from './base';
 
+function getVueLoaderPlugin(): VueLoaderPlugin {
+	return require('vue-loader').VueLoaderPlugin;
+}
+
 export default function (config: Config, env: IWebpackEnv = _env): Config {
 	base(config, env);
 
@@ -83,7 +87,7 @@ export default function (config: Config, env: IWebpackEnv = _env): Config {
 		.plugin('VueLoaderPlugin')
 		// @ts-ignore
 		.before(config.plugins.values()[0].name)
-		.use(VueLoaderPlugin);
+		.use(getVueLoaderPlugin());
 
 	// add an alias for vue, since some plugins may try to import it
 	config.resolve.alias.set('vue', 'nativescript-vue');