aspnet-webpack/src/SourceMapDevToolPlugin.ts

import * as webpack from 'webpack';

const searchValue = /^\n*\/\/# sourceMappingURL=data:application\/json;charset=utf-8;base64,/;
const replaceValue = '\n//# sourceMappingURL=data:application/json;base64,';

/**
 * Wraps Webpack's built-in SourceMapDevToolPlugin with a post-processing step that makes inline source maps
 * work with Visual Studio's native debugger.
 *
 * The issue this fixes is that VS doesn't like to see 'charset=utf-8;' in the 'sourceMappingURL'. If that string
 * is present, VS will ignore the source map entirely. Until that VS bug is fixed, we can just strip out the charset
 * specifier from the URL. It's not needed because tools assume it's utf-8 anyway.
 */
export class SourceMapDevToolPlugin {
    /**
     * Constructs an instance of SourceMapDevToolPlugin.
     *
     * @param options Options that will be passed through to Webpack's native SourceMapDevToolPlugin.
     */
    constructor(private options?: any) {}

    protected apply(compiler: any) {
        // First, attach Webpack's native SourceMapDevToolPlugin, passing through the options
        const underlyingPlugin: any = new webpack.SourceMapDevToolPlugin(this.options);
        underlyingPlugin.apply(compiler);

        // Hook into the compilation right after the native SourceMapDevToolPlugin does
        compiler.plugin('compilation', compilation => {
            compilation.plugin('after-optimize-chunk-assets', chunks => {
                // Look for any compiled assets that might be an inline 'sourceMappingURL' source segment
                if (compilation.assets) {
                    Object.getOwnPropertyNames(compilation.assets).forEach(assetName => {
                        const asset = compilation.assets[assetName];
                        if (asset && asset.children instanceof Array) {
                            for (let index = 0; index < asset.children.length; index++) {
                                const assetChild = asset.children[index];
                                if (typeof assetChild === 'string') {
                                    // This asset is a source segment, so if it matches our regex, update it
                                    asset.children[index] = assetChild.replace(searchValue, replaceValue);
                                }
                            }
                        }
                    });
                }
            });
        });
    }
}