如何统一VS Code扩展测试与部署的入口文件？

方法1：通过调试配置（launch.json）直接覆盖 #

VS Code的调试配置支持单独指定扩展入口，完全绕过package.json的main字段，这是最简便的方案。修改.vscode/launch.json中的配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Extension",
      "type": "extensionHost",
      "request": "launch",
      "runtimeExecutable": "${execPath}",
      "args": ["--extensionDevelopmentPath=${workspaceFolder}"],
      // 强制指定调试时的入口文件
      "main": "${workspaceFolder}/out/extension.js",
      "outFiles": ["${workspaceFolder}/out/**/*.js"]
    }
  ]
}

调试时VS Code会优先使用这里配置的入口路径，无需修改package.json的main字段，发布时保持其指向./dist/extension.js即可。

方法2：用npm脚本动态切换配置（可选） #

如果需要在不同场景下自动同步package.json的main字段，可以通过简单脚本实现：

1. 在项目根目录创建两个配置文件：
   • package.dev.json：调试专用配置，main设为"./out/extension.js"
   • package.prod.json：发布专用配置，main设为"./dist/extension.js"
2. 在package.json中添加脚本：

"scripts": {
  "predev": "cp package.dev.json package.json",
  "dev": "code .",
  "prepublish": "cp package.prod.json package.json"
}

启动调试前运行npm run dev，发布前运行npm run prepublish，即可自动替换package.json的配置。注意将package.dev.json和package.prod.json加入版本控制，把package.json设为忽略提交（如果用Git的话）。

方法3：webpack多环境构建（进阶） #

如果调试时也想使用webpack构建的产物，可以配置webpack根据环境输出到不同目录：

1. 修改webpack.config.js，添加环境判断：

const path = require('path');

module.exports = (env) => {
  const isProd = env.production;
  return {
    entry: './src/extension.ts',
    output: {
      path: isProd ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'dev-dist'),
      filename: 'extension.js',
      libraryTarget: 'commonjs2'
    },
    // 其他loader、plugin配置...
  };
};

2. 调试时运行webpack --env development构建到dev-dist，并在launch.json中指定main为${workspaceFolder}/dev-dist/extension.js；发布时用webpack --env production构建到dist，保持package.json的main指向./dist/extension.js。

最推荐方法1，无需额外构建或脚本操作，直接利用VS Code调试特性解决问题。

内容的提问来源于stack exchange，提问作者Gábor