How to correctly bundle a vscode extension using webpack

Question

The problem that i am having is that when i run vsce package i still get the This extension consists of 3587 separate files. For performance reasons, you should bundle your extension: warning, i followed the Bundling Extension steps, debugging works as expected.

package.json

{
  "main": "./out/extension",
  "scripts": {
    "vscode:prepublish": "webpack --mode production",
    "webpack": "webpack --mode development",
    "webpack-dev": "webpack --mode development --watch",
    "compile": "npm run webpack",
    "watch": "tsc -watch -p ./",
    "postinstall": "node ./node_modules/vscode/bin/install"
  },
}

The webpack config is an exact copy of the Bundling Extension example.

score 7 · Accepted Answer · answered Aug 16 '19 at 08:57

7

This sounds like you might've forgotten to add the source directories to .vscodeignore, so they're still being packaged into the release. The ignore file should probably contain at least the following, plus anything else not needed at runtime:

src/**
node_modules/**

answered Aug 16 '19 at 08:57

Gama11

31,714
9
78
100

could you check my answer below and see if it can be improved, the extension is working, but the bundle is still complaining about not being correct. If I remove the client and server node_modules folders the extension does not work – Mauricio Gracia Gutierrez Apr 25 '21 at 14:17

score 0 · Answer 2 · edited Apr 25 '21 at 21:28

If you are working with a Language Server extension which has both client and server folders, If you exclude the node_modules of the client and server from the bundle the extension would fail when installed and launch for the first time

.vscodeignore contains

.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, you have 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;
}());

How to correctly bundle a vscode extension using webpack

2 Answers2

Linked