Webpack 这一 JS 模块打包神器相信大家都不陌生了。由于 VS Code 插件大部分也都是 JS/TS 代码 + 依赖库的形式，因此也可以使用 Webpack 打包，优化性能。
VS Code 插件的开发者们不妨尝试一下 Webpack 为自己插件所带来的惊喜！
增加 Webpack 相关依赖库
npm install --save-dev webpack webpack-cli ts-loader复制代码
使用 ts-loader 是由于我的插件是基于 TypeScript 编写的。
添加 Webpack 配置文件
//@ts-check'use strict';const path = require('path');/**@type {import('webpack').Configuration}*/const config = { // VS Code 插件运行于 Node.js 上下文中 // ? -> https://webpack.js.org/configuration/node/ target: 'node', node: { __dirname: false, __filename: false, }, // 插件的运行入口。 // ? -> https://webpack.js.org/configuration/entry-context/ entry: './src/extension.ts', // 我们将打包后的文件保存于 'dist' 目录下 // ? -> https://webpack.js.org/configuration/output/ output: { path: path.resolve(__dirname, 'dist'), filename: 'extension.js', libraryTarget: "commonjs2", devtoolModuleFilenameTemplate: "../[resource-path]", }, externals: { // 'vscode'模块由 VS Code 运行时提供，可以将其排除避免打包文件过大 // ? -> https://webpack.js.org/configuration/externals/ vscode: "commonjs vscode", }, devtool: 'source-map', // 解析 TypeScript 和 JavaScript 文件 // ? -> https://github.com/TypeStrong/ts-loader resolve: { extensions: ['.ts', '.js'], }, module: { rules: [{ test: /\.ts$/, exclude: /node_modules/, use: [{ loader: 'ts-loader', }] }] },}module.exports = config;复制代码 由于我们会使用打包后的输出文件作为插件的代码，因此务必要记得修改
package.json中的插件主程序入口，例如："main": "./out/src/extension"修改为"main": "./dist/extension"。
不要忘记将
dist目录添加到.gitignore中。
优化开发体验
另外，我们可以更新开发插件时所用的 Launch Configuration 来优化开发体验。
更新 launch.json
launch.json 文件存放了我们平时调试插件时的配置信息:
{ "version": "0.1.0", "configurations": [ { "name": "Launch Extension", "type": "extensionHost", "request": "launch", "runtimeExecutable": "${execPath}", "args": ["--extensionDevelopmentPath=${workspaceRoot}" ], "stopOnEntry": false, "sourceMaps": true, // 注意这里需要使用 Webpack 的输出文件路径。 "outFiles": [ "${workspaceRoot}/dist/**/*.js" ], // 在 Launch 之前的前置任务，定义见下文。 "preLaunchTask": "npm: watch" } ]}复制代码 定义 npm:watch 并创建 tasks.json
首先我们在 package.json 中定义 watch 任务：
"scripts:" { ... "watch": "webpack --mode development --watch --info-verbosity verbose" ...}复制代码 这里我们让 Webpack 以 watch 模式监听我们对代码的修改，并实时地对代码进行打包，并让其以 verbose 模式输出更多的打包信息。这是为什么呢？因为我们可以利用这些输出信息让 VS Code 知道打包已经完成了。
为了做到这一点，我们需要在 task.json 中创建一个监听输出的任务，这样就可让 VS Code 在 Webpack 完成打包后，自动启动我们的插件进行调试：
{ "version": "2.0.0", "tasks": [ { // 定义 npm: watch "type": "npm", "script": "watch", "problemMatcher": { "owner": "typescript", "pattern":[ { "regexp": "\\[tsl\\] ERROR", "file": 1, "location": 2, "message": 3 } ], "background": { "activeOnStart": true, // 通过对 Webpack 的输出内容进行匹配，得知编译是否完成 "beginsPattern": "Compilation \\w+ starting…", "endsPattern": "Compilation\\s+finished" } }, "isBackground": true, "presentation": { "reveal": "never" }, "group": { "kind": "build", "isDefault": true } } ]复制代码 更新 vscode:prepublish 脚本
vscode:prepublish 是定义在 package.json 中的一段脚本，这段脚本会在生成 VS Code 插件安装包之前执行：
"scripts:" { ... // 使用 VSCE 生成插件时的前置脚本，让 Webpack 打包 "vscode:prepublish": "webpack --mode production" ...}复制代码 更多关于
vscode:prepublish的介绍。
更新 .vscodeignore
类似于 .gitignore, .vscodeignore 列出了在生成 VS Code 插件安装包时，所有不需要放入安装包中的文件及目录，这里我们可以增加下列几项：
dist/**/*.map：.map文件仅在本地调试时需要用到。webpack.config.js：Webpack 的配置文件也不需要放入安装包当中。node_modules：由于使用 Webpack 对依赖库进行了打包，因此我们不再需要将node_modules放入安装包当中了，这将极大缩小安装包的大小。
效果
至此我们就已经大功告成了，那么使用了 Webpack 究竟能对 VS Code 插件的性能产生多大的影响呢？我们以 为例：
| 安装包大小 | 加载时间 | |
|---|---|---|
| 未使用 Webpack | 9.8M | ~2000ms |
| 使用 Webpack | 1.9M | ~200ms |
在使用 Webpack 后，安装包的大小由原先的 9.8M 缩减到了 1.9M (在这其中还包含了一些 .jar 文件，真正的 extension.js 在解压后，仅为 900KB 左右)。
性能上，我们利用 VS Code 自带的查看插件加载所用的时间，在我的电脑上， 的加载时间由原先的 2000ms 缩短到了 200ms 左右，前后相差近 10 倍，可以说效果非常显著了。
如果你也是 VS Code 插件的开发者，那就不要犹豫，让 Webpack 带你的插件起飞吧！
最后
VS Code Team 官方提供了使用 Webpack 的，感兴趣的童靴可以直接查看。
最后的最后
打一波小小的广告。我们 Team 目前致力于一系列 VS Code 中的 Java 开发插件，所有项目均为开源项目，欢迎有兴趣的童鞋下载试用：
可以通过提 Issue?的方式给我们提出修改建议，喜欢的话也可以打 ⭐️支持哦！