Visual Studio 2017+Webpack编译TypeScript：兼顾功能与效率方案求助

我完全懂你的两难——既要攥住VS那套好用的代码导航功能，又不想让它生成没用的JS拖慢编译，还得依赖Webpack的打包、tree shaking这些核心能力。下面给你几个落地可行的解决方案：

方案1：通过项目属性禁用VS的JS输出，保留语言服务 #

直接修改你的.csproj文件，添加这段配置：

<PropertyGroup>
  <!-- 允许VS的TypeScript语言服务正常运行（保留导航、查找引用） -->
  <TypeScriptCompileBlocked>false</TypeScriptCompileBlocked>
  <!-- 禁止VS生成输出JS文件，彻底砍掉拖慢编译的源头 -->
  <TypeScriptGenerateOutputFiles>false</TypeScriptGenerateOutputFiles>
</PropertyGroup>

这个配置的核心是只关闭VS的编译输出功能，但完整保留TypeScript语言服务的所有核心能力——你需要的“Find all references”和“Goto definition”完全不受影响。VS后台依然会默默做语法检查、类型分析，但不会生成任何JS文件，编译速度自然就上来了。

方案2：拆分tsconfig，让VS和Webpack各司其职 #

如果你的Webpack编译需要和VS语言服务不同的TypeScript配置，可以拆分两个tsconfig文件，让两者各用各的：

1. 主tsconfig.json（给VS用）：添加"noEmit": true，明确告诉VS只做语言服务，别生成文件：

{
  "compilerOptions": {
    "noEmit": true,
    // 其他你的常规TypeScript配置：target、module、strict等
  },
  "include": ["src/**/*"]
}

2. 新建tsconfig.webpack.json（给Webpack用）：去掉noEmit或者设为false，确保Webpack能正常编译输出：

{
  "compilerOptions": {
    "noEmit": false,
    // 和主配置一致的compilerOptions，或者根据Webpack需求微调
  },
  "include": ["src/**/*"]
}

然后在Webpack配置里指定使用这个专属的tsconfig（以ts-loader为例）：

module.exports = {
  // ...其他Webpack配置
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: 'tsconfig.webpack.json'
            }
          }
        ]
      }
    ]
  }
};

这种方式灵活性更高，能保证VS的语言服务提示和Webpack的编译结果完全匹配，同时互不干扰。

验证效果 #

配置完之后，你可以这样确认：

• 试试“Find all references”或“Goto definition”，确认功能正常；
• 打开VS的“输出”窗口（切换到“TypeScript”频道），不会看到生成JS文件的日志；
• 运行Webpack编译，确认依然能正常生成打包后的文件。

这样就完美解决了你的需求：保留VS的代码导航能力，禁用无用的JS输出，同时继续使用Webpack的全部功能。

内容的提问来源于stack exchange，提问作者LynchDev