webpack configurations / parsing vue files

package.json

@@ -7,8 +7,8 @@
   "scripts": {
     "dev": "yarn compile:dll && concurrently yarn:dev:*",
     "dev-run": "electron --inspect .",
-    "dev:main": "DEBUG=true webpack --watch --config webpack.main.ts",
-    "dev:renderer": "DEBUG=true webpack --watch --config webpack.renderer.ts",
+    "dev:main": "DEBUG=true webpack --watch --cache --config webpack.main.ts",
+    "dev:renderer": "DEBUG=true webpack --watch --cache --config webpack.renderer.ts",
     "compile": "NODE_ENV=production concurrently 'yarn download-bins' 'yarn i18n:compile' 'yarn compile:dll' && concurrently yarn:compile:*",
     "compile:main": "NODE_ENV=production webpack -p --progress --config webpack.main.ts",
     "compile:renderer": "NODE_ENV=production webpack -p --progress --config webpack.renderer.ts",

src/renderer/_vue/index.js

@@ -2,9 +2,6 @@ import "../../common/system-ca"
 import "./assets/css/app.scss"
 import "prismjs";
 import "prismjs/components/prism-yaml"
-import "prismjs/themes/prism-tomorrow.css";
-import "vue-prism-editor/dist/VuePrismEditor.css";
-
 import { remote } from "electron"
 import Vue from 'vue'
 import VueElectron from 'vue-electron'
@@ -33,18 +30,19 @@ Vue.mixin({
   }
 })
 
-export function appInitVue() {
-  setTimeout(async () => {
-    try {
-      await store.dispatch('init');
-      new Vue({
-        components: {App},
-        store,
-        router,
-        template: '<App/>'
-      }).$mount('#app_vue')
-    } catch (err) {
-      console.error(err)
-    }
-  })
+// run
+setTimeout(main, 250);
+
+export async function main() {
+  try {
+    await store.dispatch('init');
+    new Vue({
+      components: {App},
+      store,
+      router,
+      template: '<App/>'
+    }).$mount('#app_vue')
+  } catch (err) {
+    console.error(err)
+  }
 }

src/renderer/components/app.tsx

@@ -81,3 +81,6 @@ export class App extends React.Component {
     )
   }
 }
+
+// run
+App.init();

src/renderer/template.html

@@ -15,6 +15,7 @@ and Electron <script>document.write(process.versions.electron)</script>.
 <div id="app_vue"></div>
 
 <script src="dll.js"></script>
+<script src="renderer_vue.js"></script>
 
 </body>
 </html>

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "outDir": "./dist",
     "jsx": "react",
-    "target": "ESNext",
+    "target": "ES2017",
     "module": "ESNext",
     "lib": ["ESNext", "DOM", "DOM.Iterable"],
     "moduleResolution": "Node",

webpack.renderer.ts

@@ -6,17 +6,19 @@ import TerserWebpackPlugin from "terser-webpack-plugin";
 import { htmlTemplate, isDevelopment, isProduction, outDir, rendererDir, sassCommonVars, tsConfigFile } from "./src/common/vars";
 import { libraryTarget, manifestPath } from "./webpack.dll";
 
-export default function (): webpack.Configuration {
-  const VueLoaderPlugin = require("vue-loader/lib/plugin");
+export default [
+  webpackConfigReact,
+  webpackConfigVue,
+];
 
+export function webpackConfigReact(): webpack.Configuration {
   return {
     target: "electron-renderer",
     mode: isProduction ? "production" : "development",
-    devtool: isProduction ? "source-map" : "eval-source-map",
+    devtool: isProduction ? "source-map" : "cheap-module-eval-source-map",
     cache: isDevelopment,
     entry: {
-      // renderer: path.resolve(rendererDir, "component/app.tsx"),
-      renderer_vue: path.resolve(rendererDir, "_vue/index.js"),
+      renderer: path.resolve(rendererDir, "components/app.tsx"),
     },
     output: {
       path: outDir,
@@ -30,7 +32,6 @@ export default function (): webpack.Configuration {
       extensions: [
         '.js', '.jsx', '.json',
         '.ts', '.tsx',
-        '.vue',
       ]
     },
     optimization: {
@@ -56,10 +57,6 @@ export default function (): webpack.Configuration {
           test: /\.node$/,
           use: "node-loader"
         },
-        {
-          test: /\.jsx?$/,
-          use: "babel-loader"
-        },
         {
           test: /\.tsx?$/,
           exclude: /node_modules/,
@@ -79,26 +76,13 @@ export default function (): webpack.Configuration {
             }
           ]
         },
-        {
-          test: /\.vue$/,
-          use: {
-            loader: "vue-loader",
-            options: {
-              shadowMode: false,
-              loaders: {
-                css: "!!vue-style-loader!css-loader",
-                scss: "!!vue-style-loader!css-loader!sass-loader",
-              }
-            }
-          }
-        },
         {
           test: /\.(jpg|png|svg|map|ico)$/,
-          use: 'file-loader?name=assets/[name]-[hash:6].[ext]'
+          use: "file-loader?name=images/[name]-[hash:6].[ext]"
         },
         {
           test: /\.(ttf|eot|woff2?)$/,
-          use: 'file-loader?name=fonts/[name].[ext]'
+          use: "file-loader?name=fonts/[name].[ext]"
         },
         {
           test: /\.s?css$/,
@@ -128,15 +112,12 @@ export default function (): webpack.Configuration {
     },
 
     plugins: [
-      new VueLoaderPlugin(), // todo: remove with _"vue/*"
-
       // todo: check if this actually works in mode=production files
       new webpack.DllReferencePlugin({
         context: process.cwd(),
         manifest: manifestPath,
         sourceType: libraryTarget,
       }),
-
       new HtmlWebpackPlugin({
         template: htmlTemplate,
         inject: true,
@@ -147,3 +128,61 @@ export default function (): webpack.Configuration {
     ],
   }
 }
+
+export function webpackConfigVue(): webpack.Configuration {
+  const config = webpackConfigReact();
+
+  config.resolve.extensions.push(".vue");
+  config.entry = {
+    renderer_vue: path.resolve(rendererDir, "_vue/index.js")
+  }
+
+  // rules and loaders
+  config.module.rules = config.module.rules
+    .filter(({ test }: { test: RegExp }) => !test.test(".ts"))
+    .filter(({ test }: { test: RegExp }) => !test.test(".css"))
+
+  config.module.rules.push(
+    {
+      test: /\.vue$/,
+      use: {
+        loader: "vue-loader",
+        options: {
+          shadowMode: false,
+          loaders: {
+            css: "vue-style-loader!css-loader",
+            scss: "vue-style-loader!css-loader!sass-loader",
+          }
+        }
+      }
+    },
+    {
+      test: /\.jsx?$/,
+      loader: "babel-loader",
+    },
+    {
+      test: /\.tsx?$/,
+      loader: "ts-loader",
+      options: {
+        transpileOnly: false,
+        appendTsSuffixTo: [/\.vue$/],
+      }
+    },
+    {
+      test: /\.s?css$/,
+      use: [
+        'vue-style-loader',
+        'css-loader',
+        'sass-loader'
+      ]
+    }
+  );
+
+  // plugins
+  const VueLoaderPlugin = require("vue-loader/lib/plugin");
+  config.plugins = [
+    new VueLoaderPlugin(),
+  ];
+
+  return config;
+}