fix: Extension is now bundled with webpack (#1020)

Author: JohnstonCode

.github/workflows/main.yml

@@ -33,8 +33,8 @@ jobs:
         run: 'yarn install --frozen-lockfile || yarn install --frozen-lockfile'
         shell: bash
 
-      - name: Compile sources
-        run: yarn run build
+      - name: Compile sources for tests
+        run: yarn run test-compile
 
       - name: Cache VSCode binary
         id: cache-vscode

.vscodeignore

@@ -22,3 +22,9 @@ tslint.json
 vsc-extension-quickstart.md
 .dependabot/**
 images/docs/**
+bin
+node_modules
+webpack.config.js
+
+out/**
+!out/extension.js*

package.json

@@ -35,8 +35,8 @@
     "scripts": {
         "build": "yarn run build:ts && yarn run build:css",
         "build:css": "yarn node-sass scss/ -o css/ --output-style compressed",
-        "build:ts": "yarn tsc -p ./",
-        "compile": "yarn tsc -watch -p ./",
+        "build:ts": "webpack --mode production",
+        "compile": "webpack --mode development --watch",
         "lint": "eslint \"src/**/*.ts\"",
         "lint:fix": "yarn run lint --fix",
         "organize": "node ./out/tools/organize.js",
@@ -46,7 +46,8 @@
         "test": "node ./out/test/runTest.js",
         "tools:genReadme": "node ./out/tools/generateConfigSectionForReadme.js",
         "vscode:prepublish": "yarn run lint && yarn run build",
-        "watch:css": "yarn run build:css -w"
+        "watch:css": "yarn run build:css -w",
+        "test-compile": "tsc -p ./"
     },
     "dependencies": {
         "chardet": "^1.2.1",
@@ -82,8 +83,11 @@
         "prettylint": "^1.0.0",
         "semantic-release": "^17.1.1",
         "semantic-release-vsce": "^3.0.1",
+        "ts-loader": "^8.0.1",
         "typescript": "^3.9.7",
-        "vscode-test": "^1.4.0"
+        "vscode-test": "^1.4.0",
+        "webpack": "^4.44.1",
+        "webpack-cli": "^3.3.12"
     },
     "config": {
         "commitizen": {

webpack.config.js

@@ -0,0 +1,44 @@
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+const IGNORED = ['jschardet', 'iconv-lite', 'iconv-lite-umd', './vscodeModules'];
+/**@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, 'out'),
+    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']
+  },
+  module: {
+    noParse: /vscodeModules/,
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'ts-loader'
+          }
+        ]
+      }
+    ]
+  }
+};
+module.exports = config;