NativeScript · sis0k0 · Sep 13, 2018 · Sep 10, 2018 · Sep 12, 2018 · Sep 13, 2018
diff --git a/lib/after-watch.js b/lib/after-watch.js
@@ -1,8 +1,6 @@
-const compiler = require('./compiler');
+const { stopWebpackCompiler } = require('./compiler');
+
 module.exports = function($logger) {
-    const webpackProcess = compiler.getWebpackProcess();
-    if (webpackProcess) {
-        $logger.info("Stopping webpack watch");
-        webpackProcess.kill("SIGINT");
-    }
+    $logger.info("Stopping webpack watch");
+    stopWebpackCompiler();
 }
diff --git a/lib/before-cleanApp.js b/lib/before-cleanApp.js
@@ -1,13 +1,14 @@
 const { cleanSnapshotArtefacts } = require("../snapshot/android/project-snapshot-generator");
 const { isAndroid } = require("../projectHelpers");
-const { getWebpackProcess } = require("./compiler");
+const { getWebpackProcesses } = require("./compiler");
 
 module.exports = function (hookArgs) {
     return (args, originalMethod) => {
-        const webpackProcess = getWebpackProcess();
-        const promise = webpackProcess ? Promise.resolve() : originalMethod(...args);
+        const platform = hookArgs.platformInfo.platform;
+        const webpackProcesses = getWebpackProcesses();
+        const promise = webpackProcesses[platform] ? Promise.resolve() : originalMethod(...args);
         return promise.then(() => {
-            if (isAndroid(hookArgs.platformInfo.platform)) {
+            if (isAndroid(platform)) {
                 cleanSnapshotArtefacts(hookArgs.platformInfo.projectData.projectDir);
              }
         });

diff --git a/lib/before-preview-sync.js b/lib/before-preview-sync.js
@@ -0,0 +1,21 @@
+const { runWebpackCompiler } = require("./compiler");
+
+module.exports = function($logger, $liveSyncService, hookArgs) {
+	const { config } = hookArgs;
+	const bundle = config && config.appFilesUpdaterOptions && config.appFilesUpdaterOptions.bundle;
+	if (bundle) {
+		const env = config.env || {};
+		const platform = config.platform;
+		const release = config && config.appFilesUpdaterOptions && config.appFilesUpdaterOptions.release;
+		const compilerConfig = {
+			env,
+			platform,
+			bundle,
+			release,
+			watch: true
+		};
+
+		return runWebpackCompiler(compilerConfig, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
+	}
+}
+
diff --git a/lib/before-watch.js b/lib/before-watch.js
@@ -1,23 +1,33 @@
-const { runWebpackCompiler } = require("./compiler");
+const { getWebpackProcesses, runWebpackCompiler, stopWebpackCompiler } = require("./compiler");
 
-module.exports = function ($logger, $liveSyncService, $options, hookArgs) {
-    if (hookArgs.config) {
-        const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
-        if (appFilesUpdaterOptions.bundle) {
-            const platforms = hookArgs.config.platforms;
-            return Promise.all(platforms.map(platform => {
-                const env = hookArgs.config.env || {};
-                env.hmr = !!$options.hmr;
-                const config = {
-                    env,
-                    platform,
-                    bundle: appFilesUpdaterOptions.bundle,
-                    release: appFilesUpdaterOptions.release,
-                    watch: true
-                };
+module.exports = function ($logger, $liveSyncService, $options, $devicesService, hookArgs) {
+	if (hookArgs.config) {
+		const appFilesUpdaterOptions = hookArgs.config.appFilesUpdaterOptions;
+		if (appFilesUpdaterOptions.bundle) {
+			$liveSyncService.on("liveSyncStopped", data => {
+				const webpackProcesses = getWebpackProcesses();
+				Object.keys(webpackProcesses).forEach(platform => {
+					const devices = $devicesService.getDevicesForPlatform(platform);
+					if (!devices || !devices.length) {
+						stopWebpackCompiler(platform);
+					}
+				});
+			});
 
-                return runWebpackCompiler(config, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
-            }));
-        }
-    }
+			const platforms = hookArgs.config.platforms;
+			return Promise.all(platforms.map(platform => {
+				const env = hookArgs.config.env || {};
+				env.hmr = !!$options.hmr;
+				const config = {
+					env,
+					platform,
+					bundle: appFilesUpdaterOptions.bundle,
+					release: appFilesUpdaterOptions.release,
+					watch: true
+				};
+
+				return runWebpackCompiler(config, hookArgs.projectData, $logger, $liveSyncService, hookArgs);
+			}));
+		}
+	}
 }
diff --git a/lib/compiler.js b/lib/compiler.js
@@ -9,17 +9,17 @@ const { buildEnvData, debuggingEnabled } = require("./utils");
 
 let hasBeenInvoked = false;
 
-let webpackProcess = null;
+let webpackProcesses = {};
 let hasLoggedSnapshotWarningMessage = false;
 
-exports.getWebpackProcess = function getWebpackProcess() {
-    return webpackProcess;
+exports.getWebpackProcesses = function getWebpackProcess() {
+    return webpackProcesses;
 }
 
 exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $logger, $liveSyncService, hookArgs) {
     if (config.bundle) {
         return new Promise(function (resolveBase, rejectBase) {
-            if (webpackProcess) {
+            if (webpackProcesses[config.platform]) {
                 return resolveBase();
             }
 
@@ -43,6 +43,11 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
                 env["sourceMap"] = true;
             }
 
+            // Currently externals param is passed only from before-preview-sync hook. This hook is triggered only when `tns preview --bundle` command is executed
+            if (hookArgs && hookArgs.externals) {
+                env.externals = hookArgs.externals;
+            }
+
             const envData = buildEnvData($projectData, platform, env);
             const envParams = buildEnvCommandLineParams(config, envData, $logger);
 
@@ -77,22 +82,27 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
 
                     if (hookArgs.filesToSync && hookArgs.startSyncFilesTimeout) {
                         hookArgs.filesToSync.push(...message.emittedFiles);
-                        hookArgs.startSyncFilesTimeout();
+                        hookArgs.startSyncFilesTimeout(platform);
+                    }
+
+                    if (hookArgs.filesToSyncMap && hookArgs.startSyncFilesTimeout) {
+                        hookArgs.filesToSyncMap[platform] = message.emittedFiles;
+                        hookArgs.startSyncFilesTimeout(platform);
                     }
                 }
             }
 
             if (config.watch) {
                 childProcess.on("message", resolveOnWebpackCompilationComplete);
-                if (webpackProcess) {
+                if (webpackProcesses[platform]) {
                     throw new Error("Webpack process already spawned.");
                 }
-                webpackProcess = childProcess;
+                webpackProcesses[platform] = childProcess;
             }
 
             childProcess.on("close", code => {
-                if (webpackProcess == childProcess) {
-                    webpackProcess = null;
+                if (webpackProcesses[platform] === childProcess) {
+                    delete webpackProcesses[platform];
                 }
                 if (code === 0) {
                     resolve();
@@ -106,6 +116,14 @@ exports.runWebpackCompiler = function runWebpackCompiler(config, $projectData, $
     }
 }
 
+exports.stopWebpackCompiler = function stopWebpackCompiler(platform) {
+    if (platform) {
+        stopWebpackForPlatform(platform);
+    } else {
+        Object.keys(webpackProcesses).forEach(platform => stopWebpackForPlatform(platform));
+    }
+}
+
 function buildEnvCommandLineParams(config, envData, $logger) {
     const envFlagNames = Object.keys(envData);
     const snapshotEnvIndex = envFlagNames.indexOf("snapshot");
@@ -136,3 +154,9 @@ function logSnapshotWarningMessage($logger) {
     }
 }
 
+function stopWebpackForPlatform(platform) {
+    const webpackProcess = webpackProcesses[platform];
+    webpackProcess.kill("SIGINT");
+    delete webpackProcesses[platform];
+}
+
diff --git a/package.json b/package.json
@@ -44,6 +44,11 @@
         "type": "after-prepare",
         "script": "lib/after-prepare.js",
         "inject": true
+      },
+      {
+        "type": "before-preview-sync",
+        "script": "lib/before-preview-sync",
+        "inject": true
       }
     ]
   },

diff --git a/templates/webpack.angular.js b/templates/webpack.angular.js
@@ -42,8 +42,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -63,6 +66,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,

diff --git a/templates/webpack.javascript.js b/templates/webpack.javascript.js
@@ -40,8 +40,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +55,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,

diff --git a/templates/webpack.typescript.js b/templates/webpack.typescript.js
@@ -40,8 +40,11 @@ module.exports = env => {
         uglify, // --env.uglify
         report, // --env.report
         sourceMap, // --env.sourceMap
-        hmr, // --env.hmr
+        hmr, // --env.hmr,
     } = env;
+    const externals = (env.externals || []).map((e) => { // --env.externals
+        return new RegExp(e + ".*");
+    });
 
     const appFullPath = resolve(projectRoot, appPath);
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
@@ -52,6 +55,7 @@ module.exports = env => {
     const config = {
         mode: uglify ? "production" : "development",
         context: appFullPath,
+        externals,
         watchOptions: {
             ignored: [
                 appResourcesFullPath,