bundle extension using webpack

.vscode/launch.json

@@ -13,10 +13,20 @@
                 "--extensionDevelopmentPath=${workspaceFolder}"
             ],
             "outFiles": [
-                "${workspaceFolder}/out/**/*.js"
+                "${workspaceFolder}/dist/**/*.js"
             ],
             "preLaunchTask": "${defaultBuildTask}"
         },
+        {
+            "type": "node",
+            "request": "attach",
+            "name": "Attach to Server",
+            "port": 6009,
+            "restart": true,
+            "outFiles": [
+                "${workspaceRoot}/dist/**/*.js"
+            ]
+        },
         {
             "name": "Extension Tests",
             "type": "extensionHost",

.vscode/tasks.json

@@ -17,14 +17,14 @@
         },
         {
             "type": "npm",
-            "script": "compile",
+            "script": "webpack",
             "group": {
                 "kind": "build",
                 "isDefault": true
             },
             "problemMatcher": [],
-            "label": "npm: compile",
+            "label": "webpack: compile",
-            "detail": "npm run grammar && tsc -p ./"
+            "detail": "npm run grammar && npm run webpack"
         }
     ]
 }

client/src/extension.ts

@@ -26,7 +26,7 @@ export function activate(context: ExtensionContext) {
     }));
 
     const serverModule = context.asAbsolutePath(
-        path.join('server', 'out', 'server.js')
+        path.join('dist', 'server.js')
     );
 
     // The debug options for the server

package.json

@@ -15,11 +15,12 @@
     "Snippets",
     "Formatters"
   ],
+  "publisher": "quanzhuo",
   "activationEvents": [
     "onLanguage:cmake",
     "workspaceContains:CMakeLists.txt"
   ],
-  "main": "./client/out/extension",
+  "main": "./dist/client",
   "contributes": {
     "grammars": [
       {
@@ -106,11 +107,10 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "npm run compile",
+    "vscode:prepublish": "npm run grammar && npm run package",
     "compile": "npm run grammar && tsc -b . --verbose",
-    "webpack": "webpack --mode development",
+    "webpack": "npm run grammar && npm run webpack-client && npm run webpack-server",
-    "webpack-dev": "webpack --mode development --watch",
+    "package": "npm run package-client && npm run package-server",
-    "package": "webpack --mode production --devtool hidden-source-map",
     "watch": "npm run grammar && tsc -watch -b . --verbose",
     "pretest": "npm run compile && npm run lint",
     "lint": "eslint src --ext ts",
@@ -119,7 +119,11 @@
     "grammar-cmake": "npx js-yaml ./syntaxes/cmake.tmLanguage.yml > ./syntaxes/cmake.tmLanguage.json",
     "grammar-cmakecache": "npx js-yaml ./syntaxes/cmakecache.tmLanguage.yml > ./syntaxes/cmakecache.tmLanguage.json",
     "grammar-cmdsignature": "npx js-yaml ./syntaxes/cmdsignature.tmLanguage.yml > ./syntaxes/cmdsignature.tmLanguage.json",
-    "grammar": "node ./build/yaml-to-json.mjs"
+    "grammar": "node ./build/yaml-to-json.mjs",
+    "webpack-client": "webpack --mode development --config webpack.config.client.js",
+    "webpack-server": "webpack --mode development --config webpack.config.server.js",
+    "package-client": "webpack --mode production --config webpack.config.client.js --devtool hidden-source-map",
+    "package-server": "webpack --mode production --config webpack.config.server.js --devtool hidden-source-map"
   },
   "devDependencies": {
     "@types/mocha": "^9.1.1",

webpack.config.client.js

@@ -0,0 +1,59 @@
+//@ts-check
+
+'use strict';
+
+const path = require('path');
+const webpack = require('webpack');
+
+/**@type {import('webpack').Configuration}*/
+const config = {
+    target: 'node', // vscode extensions run in webworker context for VS Code web 📖 -> https://webpack.js.org/configuration/target/#target
+
+    // entry: {
+    //     client: './client/src/extension.ts',
+    //     server: './server/src/server.ts'
+    // }, // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+    // entry: "./server/src/server.ts",
+    entry: "./client/src/extension.ts",
+    output: {
+        // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+        path: path.resolve(__dirname, 'dist'),
+        filename: 'client.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
+        mainFields: ['browser', 'module', 'main'], // look for `browser` entry point in imported node modules
+        extensions: ['.ts', '.js'],
+        alias: {
+            // provides alternate implementation for node module and source files
+        },
+        fallback: {
+            // Webpack 5 no longer polyfills Node.js core modules automatically.
+            // see https://webpack.js.org/configuration/resolve/#resolvefallback
+            // for the list of Node.js core module polyfills.
+        }
+    },
+    module: {
+        rules: [
+            {
+                test: /\.ts$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'ts-loader',
+                        options: {
+                            "projectReferences": true
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+};
+module.exports = config;

webpack.config.server.js

@@ -18,7 +18,7 @@ const config = {
     output: {
         // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
         path: path.resolve(__dirname, 'dist'),
-        filename: '[name].js',
+        filename: 'server.js',
         libraryTarget: 'commonjs2',
         devtoolModuleFilenameTemplate: '../[resource-path]'
     },