Use Webpack to improve extension performance (#323)

.gitignore

@@ -1,2 +1,4 @@
 out
-node_modules
+node_modules
+dist
+.vscode-test

.travis.yml

@@ -13,6 +13,7 @@ install:
 - npm install -g vsce
 script:
 - npm run tslint
+- npm run compile
 - node scripts/genAiKey.js
 - echo "y" | vsce package
 - npm test --silent

.vscode/launch.json

@@ -7,22 +7,29 @@
             "type": "extensionHost",
             "request": "launch",
             "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}" ],
-            "stopOnEntry": false,
-            "sourceMaps": true,
-            "outFiles": [ "${workspaceRoot}/out/src/**/*.js" ],
-            "preLaunchTask": "npm"
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ],
+            "outFiles": [
+                "${workspaceFolder}/dist/**/*.js"
+            ],
+            "preLaunchTask": "npm: webpack"
         },
         {
             "name": "Launch Tests",
             "type": "extensionHost",
             "request": "launch",
             "runtimeExecutable": "${execPath}",
-            "args": ["--extensionDevelopmentPath=${workspaceRoot}", "--extensionTestsPath=${workspaceRoot}/out/test" ],
+            "args": [
+                "--extensionDevelopmentPath=${workspaceRoot}",
+                "--extensionTestsPath=${workspaceRoot}/out/test"
+            ],
             "stopOnEntry": false,
             "sourceMaps": true,
-            "outFiles": [ "${workspaceRoot}/out/test/**/*.js" ],
-            "preLaunchTask": "npm"
+            "outFiles": [
+                "${workspaceRoot}/out/test/**/*.js"
+            ],
+            "preLaunchTask": "npm: compile"
         }
     ]
 }

.vscode/settings.json

@@ -4,6 +4,7 @@
         "out": false // set this to true to hide the "out" folder with the compiled JS files
     },
     "search.exclude": {
+        "dist": true,
         "out": true // set this to false to include "out" folder in search results
     }
-}
+}

.vscode/tasks.json

@@ -1,30 +0,0 @@
-// Available variables which can be used inside of strings.
-// ${workspaceRoot}: the root folder of the team
-// ${file}: the current opened file
-// ${fileBasename}: the current opened file's basename
-// ${fileDirname}: the current opened file's dirname
-// ${fileExtname}: the current opened file's extension
-// ${cwd}: the current working directory of the spawned process
-
-// A task runner that calls a custom npm script that compiles the extension.
-{
-    "version": "0.1.0",
-
-    // we want to run npm
-    "command": "npm",
-
-    // the command is a shell script
-    "isShellCommand": true,
-
-    // show the output window only if unrecognized errors occur.
-    "showOutput": "silent",
-
-    // we run the custom script "compile" as defined in package.json
-    "args": ["run", "compile", "--loglevel", "silent"],
-
-    // The tsc compiler is started in watching mode
-    "isBackground": true,
-
-    // use the standard tsc in watch mode problem matcher to find compile problems in the output.
-    "problemMatcher": "$tsc-watch"
-}

.vscodeignore

@@ -16,3 +16,6 @@ CONTRIBUTING.md
 package-lock.json
 tslint.json
 scripts/**
+out/**
+webpack.config.js
+node_modules

package.json

@@ -2,7 +2,7 @@
   "name": "azure-iot-edge",
   "displayName": "Azure IoT Edge",
   "description": "Develop, deploy, debug, and manage your IoT Edge solution",
-  "version": "1.7.0",
+  "version": "1.7.1-webpack",
   "publisher": "vsciot-vscode",
   "aiKey": "95b20d64-f54f-4de3-8ad5-165a75a6c6fe",
   "icon": "logo.png",
@@ -49,7 +49,7 @@
     "onCommand:azure-iot-edge.setDefaultPlatform",
     "workspaceContains:**/deployment.template.json"
   ],
-  "main": "./out/src/extension",
+  "main": "./dist/extension",
   "contributes": {
     "menus": {
       "explorer/context": [
@@ -411,11 +411,13 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "tsc -p ./",
-    "compile": "tsc -watch -p ./",
+    "vscode:prepublish": "webpack --mode production",
+    "compile": "tsc -p ./",
     "postinstall": "node ./node_modules/vscode/bin/install",
     "tslint": "tslint -t verbose src/**/*.ts",
-    "test": "node ./node_modules/vscode/bin/test"
+    "test": "node ./node_modules/vscode/bin/test",
+    "webpack": "webpack --mode development",
+    "webpack-dev": "webpack --mode development --watch"
   },
   "devDependencies": {
     "@types/dotenv": "^4.0.3",
@@ -426,11 +428,15 @@
     "@types/sinon": "^5.0.5",
     "@types/strip-json-comments": "0.0.30",
     "azure-arm-resource": "^3.1.1-preview",
+    "fail-on-errors-webpack-plugin": "^3.0.0",
     "mocha": "^5.1.1",
     "sinon": "^7.1.1",
+    "ts-loader": "^4.4.2",
     "tslint": "^5.7.0",
     "typescript": "^2.0.3",
-    "vscode": "^1.1.22"
+    "vscode": "^1.1.22",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.0"
   },
   "dependencies": {
     "azure-arm-containerregistry": "^2.2.0",

src/intelliSense/configCompletionItemProvider.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 "use strict";
-import * as parser from "jsonc-parser/lib/umd/main";
+import * as parser from "jsonc-parser";
 import * as path from "path";
 import * as vscode from "vscode";
 import { Constants } from "../common/constants";

src/intelliSense/configDiagnosticProvider.ts

@@ -3,7 +3,7 @@
 
 "use strict";
 import * as fse from "fs-extra";
-import * as parser from "jsonc-parser/lib/umd/main";
+import * as parser from "jsonc-parser";
 import * as path from "path";
 import * as vscode from "vscode";
 import { Constants } from "../common/constants";

src/intelliSense/intelliSenseUtility.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 
 "use strict";
-import * as parser from "jsonc-parser/lib/umd/main";
+import * as parser from "jsonc-parser";
 import * as path from "path";
 import * as vscode from "vscode";
 import { BuildSettings } from "../common/buildSettings";

webpack.config.js

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+//@ts-check
+
+'use strict';
+
+const failOnErrorsPlugin = require('fail-on-errors-webpack-plugin');
+const path = require('path');
+const webpack = require('webpack');
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+    target: 'node', // vscode extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+
+    entry: './src/extension.ts', // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+    output: { // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'extension.js',
+        libraryTarget: "commonjs2",
+        devtoolModuleFilenameTemplate: "../[resource-path]",
+    },
+    devtool: 'source-map',
+    externals: {
+        vscode: "commonjs vscode" // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    },
+    resolve: { // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+        extensions: ['.ts', '.js', '.json']
+    },
+    module: {
+        rules: [{
+            test: /\.ts$/,
+            exclude: /node_modules/,
+            use: [{
+                loader: 'ts-loader',
+            }]
+        }]
+    },
+    plugins: [
+        // Ignore all locale files of moment.js, which can save 50KB
+        // https://webpack.js.org/plugins/ignore-plugin/#ignore-moment-locales
+        new webpack.IgnorePlugin(/^\.\/locale$/, /[\/\\]moment$/),
+        // Suppress warnings of known dynamic require
+        new webpack.ContextReplacementPlugin(
+            /applicationinsights[\/\\]out[\/\\]Library/,
+            false,
+            /$^/
+        ),
+        new webpack.ContextReplacementPlugin(
+            /ms-rest[\/\\]lib/,
+            false,
+            /$^/
+        ),
+        new webpack.ContextReplacementPlugin(
+            /applicationinsights[\/\\]out[\/\\]AutoCollection/,
+            false,
+            /$^/
+        ),
+        // Fail on warnings so that CI can report new warnings which requires attention
+        new failOnErrorsPlugin({
+            failOnErrors: true,
+            failOnWarnings: true,
+        })
+    ]
+}
+
+module.exports = config;