Add webpack watch gulp task

Now, when running `npm run watch`, both the regular tsc command
and the webpack command will be run in watch mode.

The raw gulp tasks are now:

- `gulp watchView` to watch webpack compilation.
- `gulp watchCss` to watch for css changes.
- `gulp compileView` to compile the webpack once and exit.

However, stats are no longer being printed out. Not sure why.

extensions/ql-vscode/gulpfile.ts/index.ts

@@ -1,8 +1,8 @@
 import * as gulp from 'gulp';
-import { compileTypeScript, watchTypeScript, copyViewCss, cleanOutput } from './typescript';
+import { compileTypeScript, watchTypeScript, copyViewCss, cleanOutput, watchCss } from './typescript';
 import { compileTextMateGrammar } from './textmate';
 import { copyTestData } from './tests';
-import { compileView } from './webpack';
+import { compileView, watchView } from './webpack';
 import { packageExtension } from './package';
 import { injectAppInsightsKey } from './appInsights';
 
@@ -14,5 +14,15 @@ export const buildWithoutPackage =
     )
   );
 
-export { cleanOutput, compileTextMateGrammar, watchTypeScript, compileTypeScript, copyTestData, injectAppInsightsKey };
+export {
+  cleanOutput,
+  compileTextMateGrammar,
+  watchTypeScript,
+  watchView,
+  compileTypeScript,
+  copyTestData,
+  injectAppInsightsKey,
+  compileView,
+  watchCss
+};
 export default gulp.series(buildWithoutPackage, injectAppInsightsKey, packageExtension);

extensions/ql-vscode/gulpfile.ts/typescript.ts

@@ -40,6 +40,10 @@ export function watchTypeScript() {
   gulp.watch('src/**/*.ts', compileTypeScript);
 }
 
+export function watchCss() {
+  gulp.watch('src/**/*.css', copyViewCss);
+}
+
 /** Copy CSS files for the results view into the output directory. */
 export function copyViewCss() {
   return gulp.src('src/**/view/*.css')

extensions/ql-vscode/gulpfile.ts/webpack.ts

@@ -2,7 +2,24 @@ import * as webpack from 'webpack';
 import { config } from './webpack.config';
 
 export function compileView(cb: (err?: Error) => void) {
-  webpack(config).run((error, stats) => {
+  doWebpack(config, true, cb);
+}
+
+export function watchView(cb: (err?: Error) => void) {
+  const watchConfig = {
+    ...
+    config,
+    watch: true,
+    watchOptions: {
+      aggregateTimeout: 200,
+      poll: 1000,
+    }
+  };
+  doWebpack(watchConfig, false, cb);
+}
+
+function doWebpack(internalConfig: webpack.Configuration, failOnError: boolean, cb: (err?: Error) => void) {
+  const resultCb = (error: Error | undefined, stats?: webpack.Stats) => {
     if (error) {
       cb(error);
     }
@@ -20,11 +37,16 @@ export function compileView(cb: (err?: Error) => void) {
         errors: true
       }));
       if (stats.hasErrors()) {
-        cb(new Error('Compilation errors detected.'));
+        if (failOnError) {
-        return;
+          cb(new Error('Compilation errors detected.'));
+          return;
+        } else {
+          console.error('Compilation errors detected.');
+        }
       }
+      cb();
     }
+  };
 
-    cb();
+  webpack(internalConfig, resultCb);
-  });
 }

extensions/ql-vscode/package.json

@@ -1072,6 +1072,8 @@
     "build": "gulp",
     "watch": "npm-run-all -p watch:*",
     "watch:extension": "tsc --watch",
+    "watch:webpack": "gulp watchView",
+    "watch:css": "gulp watchCss",
     "test": "mocha --exit -r ts-node/register test/pure-tests/**/*.ts",
     "preintegration": "rm -rf ./out/vscode-tests && gulp",
     "integration": "node ./out/vscode-tests/run-integration-tests.js no-workspace,minimal-workspace",
@@ -1119,9 +1121,9 @@
     "@types/chai-as-promised": "~7.1.2",
     "@types/child-process-promise": "^2.2.1",
     "@types/classnames": "~2.2.9",
-    "@types/del": "^4.0.0",
     "@types/d3": "^6.2.0",
     "@types/d3-graphviz": "^2.6.6",
+    "@types/del": "^4.0.0",
     "@types/fs-extra": "^9.0.6",
     "@types/glob": "^7.1.1",
     "@types/google-protobuf": "^3.2.7",