const path = require("path");

module.exports = {
  target: "node",
  mode: "production",
  entry: "./extension.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "extension.js",
    libraryTarget: "commonjs2",
  },
  externals: {
    vscode: "commonjs vscode", // 🚫 告诉 Webpack 这些模块由外部提供
  },
  /*
  防止将 vscode API 打包进去
  因为 VS Code 运行时自带这些 API
   externals: { vscode: 'commonjs vscode' }
  */
  resolve: {
    extensions: [".js"],
  },
  optimization: {
    minimize: true,
  },
};

1
2
3

1. 入口 (entry): './extension.js' // 程序开始打包的起点
2. 输出 (output): dist/extension.js // 最终生成文件位置
3. 排除项 (externals): vscode 模块 // 不打包进最终文件的外部依赖

在开发流程中

打包命令 (package.json 中):

"scripts": {
  "webpack": "webpack --mode production",    // 生产环境打包
  "webpack-dev": "webpack --mode development --watch" // 开发模式 + 监听文件变化
}

调试配置 (.vscode/launch.json):

1	"preLaunchTask": "npm: webpack-dev" // 调试前自动执行 webpack-dev

自动触发打包

"scripts": {
  "watch": "webpack --mode development --watch",
  "vscode:prepublish": "npm run webpack" // 发布扩展前自动打包
}

开发模式 vs 生产模式：

模式	代码压缩	调试信息	适用场景
production	✅	❌	正式发布
development	❌	✅	本地调试

Chenkaixuan's Blog

webpack基础

在开发流程中