Visual Studio 2017 Webpack Runner为何无法生成多输出文件？

Let me break down why your multi-compiler approach isn't working, and how to get those transpiled JS files generated exactly as you want:

Core Reasons the Multi-Compiler Setup Fails #

• Task Binding Limitations: The Webpack Task Runner extension for VS2017 is built to work with single webpack compiler instances by default. When you pass an array of configs (multi-compiler), the extension often only registers tasks for the first config in the array, or fails to properly map each compiler's output to a runnable task. It doesn't natively handle triggering multiple independent compilation flows from a single config file.
• Path Resolution Quirks: The extension resolves file paths relative to your VS project root, but multi-compiler setups sometimes have output paths that aren't explicitly aligned with this context. If your output paths aren't fully qualified or relative to the project root, the extension might not write files to the expected /Scripts/TypeA/ or /Scripts/TypeB/ directories.
• Version Compatibility: Older versions of the Webpack Task Runner extension don't play nice with modern webpack multi-compiler APIs. If you're using a newer webpack version (4+) with an outdated extension, it likely won't recognize the multi-config structure.

Fixes to Get Your Transpiled Files #

1. Split Configs into Separate Files #

The most reliable workaround is to create individual webpack config files for each TypeScript file:

• Create webpack.config.A.js for your A.ts file:

  module.exports = {
    entry: './Scripts/TypeA/A.ts',
    output: {
      filename: 'A_transpiled.js',
      path: __dirname + '/Scripts/TypeA'
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: 'ts-loader',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js']
    }
  };
  

• Repeat for webpack.config.B.js targeting B.ts.

Then, in VS's Task Runner Explorer, right-click each config file and select "Bindings" to add them to build/clean tasks. Each config will compile independently to your desired output path.

2. Force Command-Line Execution via the Extension #

Instead of relying on the extension's automatic config parsing, set up a custom task that runs webpack via the command line:

1. In Task Runner Explorer, click the dropdown and select "Add Task".
2. Choose "Custom Task" and set the command to webpack --config webpack.config.js (pointing to your multi-compiler config).
3. Bind this task to your desired build event.

This bypasses the extension's limited multi-compiler support and uses webpack's native command-line handling, which properly processes multi-config arrays.

3. Update the Extension #

Check the Visual Studio Marketplace for the latest version of the Webpack Task Runner extension. Newer versions often include fixes for multi-compiler compatibility, especially if you're running an older release of the extension.

Quick Notes #

• Make sure your tsconfig.json doesn't set an outDir that conflicts with webpack's output paths—this can cause unexpected overwrites.
• Verify that ts-loader and your webpack version are compatible (check the ts-loader docs for version matching).

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