Generate V3 Source Map Files

A source map is a separate .map file that records how shipped code maps back to the original source code. Version 3 is the current source map format. A V3 source map is a JSON file with a mappings field that encodes line and column positions using VLQ-encoded Base64.

Browsers load source maps when browser developer tools are open, so source maps do not add a cost for users.

Use the following process to enable V3 source map generation when using the JSDefender Webpack plugin:

1. Enable source maps in the Webpack configuration.
2. Configure Terser in the Webpack configuration.
3. Enable source maps in the JSDefender configuration.
4. Disable selected JSDefender techniques.
5. Validate stack traces.

1. Enable Source Maps in Webpack

Open the webpack.config.js file and set devtool to "source-map":

devtool: "source-map"

This enables Webpack source maps.

2. Configure Terser

Configure Terser in the Webpack configuration for improved source map accuracy.

Import the Terser plugin and configure the optimization settings:

const TerserPlugin = require("terser-webpack-plugin");

optimization: {
    minimize: true,
    minimizer: [
        new TerserPlugin({
            // Webpack 4 only:
            // sourceMap: true,
            terserOptions: {
                compress: {
                    sequences: false,
                    collapse_vars: false,
                    reduce_vars: false,
                    reduce_funcs: false
                }
            }
        })
    ]
}

Note: For Webpack 4, sourceMap: true is required. For Webpack 5, source map generation is controlled by devtool: "source-map", so no additional Terser source map configuration is required.

3. Enable Source Maps in JSDefender

Open the jsdefender.config.json file in the project's root folder and set sourceMaps to true at the root level:

{
    "sourceMaps": true
}

4. Disable Selected JSDefender Techniques

Disable the following JSDefender techniques:

• localDeclarations
• exprSequence
• selfDefending

Following the Terser configuration and disabling these techniques results in noticeably better source map accuracy.

5. Validate Stack Traces

After configuring source map generation:

1. Build the application.
2. Generate a runtime error.
3. Verify that the browser stack trace resolves back to the original source files with line and column mappings.