Use webpack to reduce package size (#80)

Author: akaroml

.gitignore

@@ -60,3 +60,5 @@ typings/
 out/
 
 .DS_Store
+
+.vscode-test

.vscode/launch.json

@@ -16,7 +16,7 @@
             "outFiles": [
                 "${workspaceFolder}/out/**/*.js"
             ],
-            "preLaunchTask": "watch"
+            "preLaunchTask": "npm: watch"
         },
         {
             "name": "Extension Tests",

.vscode/tasks.json

@@ -3,51 +3,32 @@
 {
     "version": "2.0.0",
     "tasks": [
-        {
-            "label": "watch",
-            "group": "build",
-            "isBackground": true,
-            "presentation": {
-                "reveal": "never",
-            },
-            "problemMatcher": [],
-            "dependsOn": ["npm: watch", "npm: watch-assets"]
-        },
         {
             "type": "npm",
             "script": "watch",
-            "problemMatcher": "$tsc-watch",
-            "isBackground": true,
-            "presentation": {
-                "reveal": "never"
-            },
-            "group": {
-                "kind": "build",
-                "isDefault": true
-            }
-        },
-        {
-            "type": "npm",
-            "script": "watch-assets",
-            "isBackground": true,
-            "presentation": {
-                "reveal": "never",
-            },
-            "group": "build",
             "problemMatcher": {
-                "pattern": [
+                "owner": "typescript",
+                "pattern":[
                     {
-                        "regexp": "^([^\\\\s].*)\\\\((\\\\d+,\\\\d+)\\\\):\\\\s*(.*)$",
+                        "regexp": "\\[tsl\\] ERROR",
                         "file": 1,
                         "location": 2,
                         "message": 3
                     }
                 ],
                 "background": {
-                    "beginsPattern": "^Webpack is watching the files.*",
                     "activeOnStart": true,
-                    "endsPattern": "^Built at.*"
+                    "beginsPattern": "Compilation \\w+ starting…",
+                    "endsPattern": "Compilation\\s+finished"
                 }
+            },
+            "isBackground": true,
+            "presentation": {
+                "reveal": "never"
+            },
+            "group": {
+                "kind": "build",
+                "isDefault": true
             }
         }
     ]

.vscodeignore

@@ -1,4 +1,15 @@
 release-notes/**/*.gif
 release-notes/**/*.png
 release-notes/**/*.jpg
-
+node_modules
+src
+.vscode
+.github
+.gitignore
+package-lock.json
+tsconfig.json
+tslint.json
+webpack.config.ext.js
+webpack.config.js
+out/**/*.map
+out/assets/**/*.js

package-lock.json

@@ -51,11 +51,10 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "npm run compile&npm run build-assets",
-    "compile": "tsc -p ./",
-    "watch": "tsc -watch -p ./",
-    "build-assets": "webpack --config webpack.config.js",
-    "watch-assets": "webpack --config webpack.config.js --watch",
+    "vscode:prepublish": "npm run build",
+    "compile": "webpack --config webpack.config.js",
+    "watch": "webpack --config webpack.config.js --watch --info-verbosity verbose",
+    "build": "webpack --config webpack.config.js --mode=\"production\"",
     "postinstall": "node ./node_modules/vscode/bin/install",
     "test": "npm run compile && node ./node_modules/vscode/bin/test"
   },

package.json

@@ -46,7 +46,7 @@ export async function overviewCmdHandler(context: vscode.ExtensionContext, opera
   context.globalState.update(KEY_OVERVIEW_LAST_SHOW_TIME, Date.now().toString());
 
   overviewView.iconPath = vscode.Uri.file(path.join(context.extensionPath, 'logo.lowres.png'));
-  let buffer = await readFile(require.resolve('./assets/index.html'));
+  let buffer = await readFile(path.join(context.extensionPath, './out/assets/overview/index.html'));
   overviewView.webview.html = buffer.toString();
 
   overviewView.onDidDispose(() => {

src/overview/index.ts

@@ -5,7 +5,9 @@ const path = require('path');
 module.exports = function (env, argv) {
   env = env || {};
 
-  return {
+  return [{
+    name: 'assets',
+    mode: 'none',
     entry: {
       overview: './src/overview/assets/index.ts'
     },
@@ -31,19 +33,50 @@ module.exports = function (env, argv) {
         }]
       }]
     },
-    mode: 'development',
     output: {
-      filename: '[name]/assets/index.js',
+      filename: 'assets/[name]/index.js',
       path: path.resolve(__dirname, 'out'),
-      publicPath: '/'
+      publicPath: '/',
+      devtoolModuleFilenameTemplate: "../[resource-path]"
     },
     plugins: [
       new HtmlWebpackPlugin({
-        filename: path.resolve(__dirname, 'out/overview/assets/index.html'),
+        filename: path.resolve(__dirname, 'out/assets/overview/index.html'),
         template: 'src/overview/assets/index.html',
         inlineSource: '.(js|css)$'
       }),
       new HtmlWebpackInlineSourcePlugin(),
-    ]
-  }
+    ],
+    devtool: 'source-map'
+  }, {
+    name: 'extension',
+    target: 'node',
+    mode: 'none',
+    entry: {
+      extension: './src/extension.ts'
+    },
+    module: {
+      rules: [{
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: 'ts-loader'
+      }]
+    },
+    resolve: {
+      modules: ['node_modules', path.resolve(__dirname, 'src')],
+      mainFiles: ['index'],
+      extensions: ['.js', '.ts', '.json']
+    },
+    output: {
+      filename: '[name].js',
+      path: path.resolve(__dirname, 'out'),
+      libraryTarget: "commonjs2",
+      publicPath: '/',
+      devtoolModuleFilenameTemplate: "../[resource-path]"
+    },
+    externals: {
+      vscode: 'commonjs vscode'
+    },
+    devtool: 'source-map'
+  }]
 };