Electron nowe instancje Vue w nowych oknach a routing

Question

Tworzę sobie sam apkę w electronie korzystając z Vue2 na renderer. Użyłem vue-electron boilerplate na starcie żeby wszystko szybko poustawiać. Początkowo miałem problem z załadowaniem odpowiedniego route'a do nowo powstałego okna

const preview = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080/#/preview` // this is OK in developoment
  : `file://${__dirname}/index.html#preview` // this doesnt work in production

próbowałem zmienić ten drugi path, żeby mi złapało ten route

• ` file://${__dirname}/index.html/!#/preview `
• ` file://${__dirname}/index.html/preview  `
• ` file://${__dirname}/index.html/#/preview `

ale żaden z powyższych nie działa, pokazywała się pusta strona. Szukałem w necie znalazłem na GH issue, w którym gość proponuje skonfigurować webpack w taki sposób aby wypluwał więcej niż 1 plik .html. Innymi słowy zaproponował ażeby tworzyć nowe instancje Vue, jakoby nowe aplikacje do każdego okna. Dzięki temu za każdym razem w oknie można pokazywać route ` / `. To wszystko działa lokalnie na kompie więc stwierdziłem, że nie będzie miało to wielkiego wpływu na wydajność więc tak też zrobiłem, teraz webpack entry mam takie:

  entry: {
    first: path.join(__dirname, '../src/renderer/pages/first.js'),
    second: path.join(__dirname, '../src/renderer/pages/second.js'),
    third: path.join(__dirname, '../src/renderer/pages/third.js'),
    fourth: path.join(__dirname, '../src/renderer/pages/fourth.js')
  },

i w pluginach

  plugins: [
   ...
    new HtmlWebpackPlugin({
      filename: 'first.html',
      chunks: ['first'],
      template: path.resolve(__dirname, '../src/index.ejs'),
      minify: {
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        removeComments: true
      },
      nodeModules: process.env.NODE_ENV !== 'production'
        ? path.resolve(__dirname, '../node_modules')
        : false
    }),
    ...// etc- new HtmlWebpackPlugin for each of entries...

Problem w tym, że każdy ten plik jest defakto taki sam i powtarza się dużo kodu i ogólnie średnio mi się podoba taka architektura. first.js, second.js itd. wyglądają tak jak main.js w nowo wygenerowanym projekcie przez Vue CLI. Importuje store, importuje router tworzę `new Vue(..)`. Jedyne czym się różnią te plik to inny import routera.

Mógłbym zrobić jakąś funkcję czy coś, która by mi pobrała odpowiedni router w tych plikach first.js, second.js itd żeby móc stworzyć uniwersalny jeden plik ( zamiast first, second itd ) tylko musiałbym coś przekazać. Bo jakbym miał np.

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

class ParentRouter {
    constructor(window) {
        this.window = window;
        this.router = {};
        this.availableRoutes = [
            {name: 'first', path: './routes/first'},
            {name: 'second', path: './routes/second'},
            {name: 'third', path: './routes/third'},
            {name: 'fourth', path: './routes/fourth'},
        ]
    }
    createRouter() {
        const currentPath = this.availableRoutes.filter(e => ( e.name === this.window ));
        this.router = new Router({
            routes: process.env.NODE_ENV === 'production'
                ? import(currentPath.path) // imported route is array of objects
                : import(this.availableRoutes[0].path + '.js')
        });
        return this.router;
    }
    //... other methods
}

export default ParentRouter;

to mógłbym tego użyć w tym uniwersalnym pliku

import Vue from 'vue'
import axios from 'axios'
import App from '../App'

import Router from '../routers/router';
const routerInstance = new Router('add');
const router = routerInstance.createRouter();

if (!process.env.IS_WEB) Vue.use(require('vue-electron'));
Vue.http = Vue.prototype.$http = axios;
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
    components: { App },
    router,
    template: '<App/>'
}).$mount('#app');

tylko jak widzicie muszę przekazać do konstruktora ParentRouter nazwe okna. A mi to webpack importuje tworzy te pliki `.html` i nie wiem za bardzo jak mógłbym taki uniwersalny plik zrobić. Żeby połączyć to first.js, second.js itd w jeden plik wtedy też w konfiguracji webpacka nie będę potrzebował już powtarzać ` new Plugin.. `.

Proszę o jakąś sugestie.