Webpack Sourcemap映射异常：仅入口文件可正常映射（ASP.NET Core 2.0）

Hey there, let's fix that sourcemap issue you're having with your ASP.NET Core 2.0 project! It's super frustrating when only your entry file maps correctly—here are the key checks and fixes to get all your .ts/.tsx files mapping back to their originals:

1. Verify TypeScript & Webpack Sourcemap Settings First #

First, make sure your tsconfig.json has sourceMap enabled. This tells TypeScript to generate the necessary .map files alongside compiled JS:

{
  "compilerOptions": {
    "sourceMap": true,
    // ... other options like target, module, jsx, etc.
  }
}

In your webpack.config.js, set the right devtool option (pick based on your environment):

• For development, use inline-source-map or eval-source-map for faster builds and inlined maps
• For production, use source-map for separate, optimized map files

Also, add the devtoolModuleFilenameTemplate to your output section—this fixes path mismatches between your compiled files and source files:

output: {
  path: path.resolve(__dirname, './wwwroot/dist'),
  filename: 'bundle.js',
  devtoolModuleFilenameTemplate: '../[resource-path]' // Adjust the relative path to match your project structure
}

2. Fix Your TypeScript Loader Configuration #

Ensure your TypeScript loader (whether ts-loader or awesome-typescript-loader) is configured to pass through sourcemap settings. Here's a solid module.rules setup for ts-loader:

module: {
  rules: [
    {
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options: {
        transpileOnly: false, // Don't skip type checking/sourcemap generation
        compilerOptions: {
          sourceMap: true // Explicitly enable here to override any tsconfig overrides
        }
      },
      exclude: /node_modules/
    }
  ]
}

3. Make Sure ASP.NET Core Serves Sourcemap Files #

By default, ASP.NET Core's static file middleware might not serve .map files (since they're not a standard MIME type). Fix this in your Startup.cs:

Option 1: Allow unknown file types #

app.UseStaticFiles(new StaticFileOptions
{
    ServeUnknownFileTypes = true,
    DefaultContentType = "application/json" // .map files are JSON format
});

Option 2: Add explicit MIME mapping #

services.Configure<StaticFileOptions>(options =>
{
    options.ContentTypeProvider.Mappings[".map"] = "application/json";
});

4. Clean & Rebuild to Clear Cached Files #

Old, leftover sourcemap files can cause weird issues. Delete everything in your output directory (like wwwroot/dist), then run your build command again (e.g., webpack --mode development or your project's build script).

Quick Sanity Check in the Browser #

Don't forget to double-check your browser's DevTools settings:

• In Chrome: Go to DevTools → Settings → Make sure "Enable JavaScript source maps" is checked
• In Firefox: Go to DevTools → Settings → Debugger → Check "Show original sources"

Here's a condensed example of a corrected webpack.config.js snippet to tie it all together:

const path = require('path');

module.exports = {
    entry: './ClientApp/boot.tsx',
    output: {
        path: path.resolve(__dirname, './wwwroot/dist'),
        filename: 'bundle.js',
        devtoolModuleFilenameTemplate: '../[resource-path]'
    },
    devtool: 'source-map',
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'ts-loader',
                options: {
                    compilerOptions: {
                        sourceMap: true
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
};

Give these steps a shot—they should get all your source files mapping correctly in the debugger!

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