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
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
