How to properly bundle a Language Server extension for VScode with client and server inside

Viewed 346

I have created my first vscode extension and I'm trying to bundle the javascript files using webpack

These are the instructions that I've been following https://code.visualstudio.com/api/working-with-extensions/publishing-extension.

But those instructions are for a single app that contains out, src, and node_modules at the top level, Language Server extension contains two main folders client and server, each with their own folders: src, out, node_modules

enter image description here

When running the vsce package I get this warning

This extension consists of 413 files, out of which 122 are JavaScript files. For performance reasons, you should bundle your 
extension: https://aka.ms/vscode-bundle-extension . You should also exclude unnecessary files by adding them to your .vscodeignore: https://aka.ms/vscode-vscodeignore
 DONE  Packaged: D:\MAO\repos\Petrel-XML\petrel-xml-0.9.1.vsix (413 files, 416.32KB)

So I´m using this .vscodeignore

.vscode
**/*.ts
**/*.map
out/**
node_modules/**
test_files/**
client/src/**
server/src/**
tsconfig.json
webpack.config.js
.gitignore

Also the documentation is a bit obsolete regarding the webpack.config.js, so I had to wrap the 'use strict' into a function with all the settings.

The entry setting was changed according to my needs

//@ts-check

(function () {
  'use strict';

  const path = require('path');

  /**@type {import('webpack').Configuration}*/
  const config = {
    target: 'node', // vscode extensions run in a Node.js-context  -> https://webpack.js.org/configuration/node/

    entry: './client/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',
      clean: true, //clean the dist folder for each time webpack is run
      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: {
      rules: [
        {
          test: /\.ts$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader'
            }
          ]
        }
      ]
    }
  };
  module.exports = config;
}());

And in the package.json I have this section.

"scripts": {
    "vscode:prepublish": "webpack --mode production",
    "webpack": "webpack --mode development",
    "webpack-dev": "webpack --mode development --watch",
    "test-compile": "tsc -p ./",
    "compile": "tsc -b",
    "watch": "tsc -b -w",
    "postinstall": "cd client && npm install && cd ../server && npm install && cd ..",
    "test": "sh ./scripts/e2e.sh"
},

Even after doing all the above the package is created but with the same "bundle warning performance" message I need to know how to correctly bundle it by removing that warning message and keep the extension working.

UPDATE: Current Microsoft documentation does not explain how to pack client and server extensions (Language Server extensions) - the current documentation about webpack for "regular" extension is here - https://code.visualstudio.com/api/working-with-extensions/bundling-extension - that is how is done like that

0 Answers
Related