pack main and renderer

package.json

@@ -3,12 +3,12 @@
   "version": "0.0.0",
   "main": "main.js",
   "scripts": {
-    "dev": "webpack --config webpack.dev.js",
-    "dev:watch": "webpack --config webpack.dev.js --watch",
     "lint": "tslint src/**/*.ts || true",
     "lint:fix": "tslint src/**/*.ts --fix",
-    "server": "webpack-dev-server --inline --progress --port 8080 --config webpack.dev.js",
-    "electron": "tsc src/main.ts --outDir build && (electron ./build --dev --watch | npm run dev:watch)"
+    "build:main": "webpack --config webpack.main.js",
+    "build:renderer": "webpack --config webpack.renderer.js",
+    "build:renderer:watch": "webpack --config webpack.renderer.js --watch",
+    "electron": "(npm run build:main | npm run build:renderer) & (electron ./build --dev --watch | npm run build:renderer:watch)"
   },
   "devDependencies": {
     "@bitwarden/jslib": "git+https://github.com/bitwarden/jslib.git",
@@ -30,14 +30,13 @@
     "node-loader": "^0.6.0",
     "node-sass": "^4.7.2",
     "sass-loader": "^6.0.6",
-    "style-loader": "^0.19.0",
     "ts-loader": "^3.0.5",
     "tslint": "^5.8.0",
     "tslint-loader": "^3.5.3",
     "typescript": "^2.5.3",
     "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.11.0",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "webpack-node-externals": "^1.6.0"
   },
   "dependencies": {
     "@angular/animations": "5.2.0",

src/app/services/services.module.ts

@@ -1,9 +1,10 @@
+//import { remote } from 'electron';
+
 import { NgModule } from '@angular/core';
 
-import { DesktopMessagingService } from './desktopMessaging.service';
-import { DesktopPlatformUtilsService } from './desktopPlatformUtils.service';
-import { DesktopStorageService } from './desktopStorage.service';
-import { DesktopSecureStorageService } from './desktopSecureStorage.service';
+import { DesktopMessagingService } from '../../services/desktopMessaging.service';
+import { DesktopPlatformUtilsService } from '../../services/desktopPlatformUtils.service';
+import { DesktopStorageService } from '../../services/desktopStorage.service';
 
 import {
     ApiService,
@@ -52,7 +53,7 @@ const utilsService = new UtilsService();
 const platformUtilsService = new DesktopPlatformUtilsService();
 const messagingService = new DesktopMessagingService();
 const storageService: StorageServiceAbstraction = new DesktopStorageService();
-//const secureStorageService: StorageServiceAbstraction = new DesktopSecureStorageService();
+const secureStorageService: StorageServiceAbstraction = storageService; //remote.getGlobal('secureStorageService');
 const constantsService = new ConstantsService({}, 0);
 const cryptoService = new CryptoService(storageService, storageService);
 const tokenService = new TokenService(storageService);

src/main.ts

@@ -2,6 +2,10 @@ import { app, BrowserWindow, screen } from 'electron';
 import * as path from 'path';
 import * as url from 'url';
 
+//import { DesktopSecureStorageService } from './services/desktopSecureStorage.service';
+//const secureStorageService = new DesktopSecureStorageService();
+//(global as any).secureStorageService = secureStorageService;
+
 let win: BrowserWindow;
 const args = process.argv.slice(1);
 const watch = args.some((val) => val === '--watch');

src/services/desktopMessaging.service.ts

@@ -1,11 +1,8 @@
-import { Injectable } from '@angular/core';
-
 import {
     MessagingService,
     PlatformUtilsService,
 } from 'jslib/abstractions';
 
-@Injectable()
 export class DesktopMessagingService implements MessagingService {
     send(subscriber: string, arg: any = {}) {
         const message = Object.assign({}, { command: subscriber }, arg);

src/services/desktopPlatformUtils.service.ts

@@ -1,5 +1,3 @@
-import { Injectable } from '@angular/core';
-
 import { DeviceType } from 'jslib/enums';
 
 import { PlatformUtilsService } from 'jslib/abstractions';
@@ -10,7 +8,6 @@ const AnalyticsIds = {
     [DeviceType.MacOs]: 'UA-81915606-18',
 };
 
-@Injectable()
 export class DesktopPlatformUtilsService implements PlatformUtilsService {
     private deviceCache: DeviceType = null;
     private analyticsIdCache: string = null;

src/services/desktopSecureStorage.service.ts

@@ -1,9 +1,7 @@
-import { Injectable } from '@angular/core';
 import { getPassword, setPassword, deletePassword } from 'keytar';
 
 import { StorageService } from 'jslib/abstractions';
 
-@Injectable()
 export class DesktopSecureStorageService implements StorageService {
     async get<T>(key: string): Promise<T> {
         const val: string = await getPassword('bitwarden', key);

src/services/desktopStorage.service.ts

@@ -1,11 +1,8 @@
-import { Injectable } from '@angular/core';
-
 import { StorageService } from 'jslib/abstractions';
 
 const Store = require('electron-store');
 const store = new Store();
 
-@Injectable()
 export class DesktopStorageService implements StorageService {
     get<T>(key: string): Promise<T> {
         const val = store.get(key) as T;

webpack.dev.js

@@ -1,24 +0,0 @@
-const merge = require('webpack-merge');
-const common = require('./webpack.common.js');
-
-module.exports = merge(common, {
-    devtool: 'inline-source-map',
-    module: {
-        rules: [
-            {
-                test: /\.scss$/,
-                use: [
-                    {
-                        loader: 'style-loader'
-                    },
-                    {
-                        loader: 'css-loader',
-                    },
-                    {
-                        loader: 'sass-loader',
-                    }
-                ]
-            }
-        ]
-    }
-});

webpack.main.js

@@ -0,0 +1,64 @@
+const path = require('path');
+const webpack = require('webpack');
+const merge = require('webpack-merge');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const nodeExternals = require('webpack-node-externals');
+
+const common = {
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                enforce: 'pre',
+                loader: 'tslint-loader'
+            },
+            {
+                test: /\.tsx?$/,
+                use: 'ts-loader',
+                exclude: /node_modules\/(?!(@bitwarden)\/).*/
+            },
+        ]
+    },
+    plugins: [],
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+        alias: {
+            jslib: path.join(__dirname, 'node_modules/@bitwarden/jslib/src')
+        }
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'build')
+    }
+};
+
+const main = {
+    target: 'electron-main',
+    node: {
+        __dirname: false,
+        __filename: false
+    },
+    entry: {
+        'main': './src/main.ts'
+    },
+    module: {
+        rules: [
+            {
+                test: /\.node$/,
+                loader: 'node-loader'
+            },
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin([
+            path.resolve(__dirname, 'build/*')
+        ]),
+        new CopyWebpackPlugin([
+            './src/package.json',
+        ]),
+    ],
+    externals: [nodeExternals()]
+};
+
+module.exports = merge(common, main);

webpack.renderer.js

@@ -1,9 +1,9 @@
 const path = require('path');
 const webpack = require('webpack');
-const CleanWebpackPlugin = require('clean-webpack-plugin');
+const merge = require('webpack-merge');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
 const GoogleFontsPlugin = require("google-fonts-webpack-plugin");
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
 
 const isVendorModule = (module) => {
     if (!module.context) {
@@ -15,17 +15,13 @@ const isVendorModule = (module) => {
     return nodeModule && !bitwardenModule;
 };
 
-module.exports = {
-    target: 'electron-renderer',
-    devServer: {
-        contentBase: './src',
-        historyApiFallback: true,
-        quiet: true,
-        stats: 'minimal'
-    },
-    entry: {
-        'app/main': './src/app/main.ts'
-    },
+const extractCss = new ExtractTextPlugin({
+    filename: '[name].css',
+    disable: false,
+    allChunks: true
+});
+
+const common = {
     module: {
         rules: [
             {
@@ -38,10 +34,31 @@ module.exports = {
                 use: 'ts-loader',
                 exclude: /node_modules\/(?!(@bitwarden)\/).*/
             },
-            {
-                test: /\.node$/,
-                loader: 'node-loader'
-            },
+        ]
+    },
+    plugins: [],
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+        alias: {
+            jslib: path.join(__dirname, 'node_modules/@bitwarden/jslib/src')
+        }
+    },
+    output: {
+        filename: '[name].js',
+        path: path.resolve(__dirname, 'build')
+    }
+};
+
+const renderer = {
+    target: 'electron-renderer',
+    node: {
+        __dirname: false
+    },
+    entry: {
+        'app/main': './src/app/main.ts'
+    },
+    module: {
+        rules: [
             {
                 test: /\.(html)$/,
                 loader: 'html-loader'
@@ -55,13 +72,23 @@ module.exports = {
                         outputPath: 'fonts/'
                     }
                 }]
-            }
+            },
+            {
+                test: /\.scss$/,
+                use: extractCss.extract({
+                    use: [
+                        {
+                            loader: 'css-loader',
+                        },
+                        {
+                            loader: 'sass-loader',
+                        }
+                    ]
+                })
+            },
         ]
     },
     plugins: [
-        new CleanWebpackPlugin([
-            path.resolve(__dirname, 'build/*')
-        ]),
         new GoogleFontsPlugin({
             fonts: [
                 {
@@ -85,18 +112,12 @@ module.exports = {
             filename: 'index.html',
             chunks: ['app/vendor', 'app/main']
         }),
-        new CopyWebpackPlugin([
-            './src/package.json',
-        ])
-    ],
-    resolve: {
-        extensions: ['.tsx', '.ts', '.js'],
-        alias: {
-            jslib: path.join(__dirname, 'node_modules/@bitwarden/jslib/src')
-        }
-    },
-    output: {
-        filename: '[name].js',
-        path: path.resolve(__dirname, 'build')
-    }
+        new webpack.SourceMapDevToolPlugin({
+            filename: '[name].js.map',
+            include: ['app/main.js']
+        }),
+        extractCss
+    ]
 };
+
+module.exports = merge(common, renderer);