Webpack with sourcemap can't resolve variables

Question

I would like to generate source maps for our production build with Webpack. I managed to generate it, but when I stop on a breakpoint in the debugger, variables are not resolved:

What am I doing wrong? How can I generate a source map that lets the chrome devtools resolve the variables once I stopped on a breakpoint in the debugger?

These are my webpack configurations:

webpack.config.js:

const path = require('path');
const ROOT = path.resolve( __dirname, 'src/main/resources/packedbundle' );

const HtmlWebpackPlugin = require('html-webpack-plugin');
const LoaderOptionsPlugin = require('webpack/lib/LoaderOptionsPlugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
context: ROOT,

resolve: {
    extensions: ['.ts', '.js']
},

module: {
    rules: [
        {
            test: /\.ts$/,
            exclude: /node_modules/,
            use: [
                {
                    loader: 'eslint-loader',
                    options: {
                        failOnError: true,
                        quiet: true
                    }
                }
            ],
            enforce: 'pre'
        },

        {
            test: /\.ts$/,
            exclude: [ /node_modules/ ],
            use: [
                'ng-annotate-loader',
                'awesome-typescript-loader'
            ]
        },

        {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'sass-loader'],
                publicPath: '../'
            }),
        },

        {
            test: /\.(jpg|png|gif)$/,
            use: 'file-loader'
        },

        {
            test: /\.(svg|woff|woff2|eot|ttf)$/,
            use: 'file-loader?outputPath=fonts/'
        },

        {
            test: /.html$/,
            exclude: /index.html$/,
            use: 'html-loader'
        }
    ]
},

plugins: [
    new HtmlWebpackPlugin({
        title: 'AngularJS - Webpack',
        template: 'index.html',
        inject: true
    }),
    new LoaderOptionsPlugin({
        debug: true
    }),
    new ExtractTextPlugin('css/style.css')
],

entry: './index.ts'

};

webpack-prd.config.js:

const path = require('path');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.config.js');
const DESTINATION = path.resolve( __dirname, 'dist/packedbundle' );

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = webpackMerge(commonConfig, {
    devtool: 'module-source-map',
    mode: 'production',
    output: {
        path: DESTINATION,
        filename: 'js/[name]-bundle-[chunkhash].js'
    },

    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                sourceMap: true
            })
        ]
    }
});

package.json:

{
  "name": "com.avon.maps.packedbundle.webcontent",
  "version": "1.0.0",
  "description": "Packed bundle creation screen frontend",
  "main": "index.js",
  "scripts": {
    "prestart": "rimraf dist",
    "start": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-dev.config.js",
    "prebuild": "rimraf dist",
    "build": "node node/node_modules/npm/bin/npx-cli.js check-node-version --package && webpack --config webpack-prd.config.js",
    "test": "mocha -r ts-node/register -r ignore-styles -r jsdom-global/register __tests__/**/*.spec.ts"
  },
  "author": "BlackBelt",
  "private": true,
  "engines": {
    "node": "11.10.0"
  },
  "devDependencies": {
    "@types/angular": "1.6.51",
    "@types/angular-loading-bar": "0.0.35",
    "@types/chai": "4.1.7",
    "@types/core-js": "2.5.0",
    "@types/jquery": "3.3.29",
    "@types/kendo-ui": "2019.1.1",
    "@types/mocha": "5.2.6",
    "@types/node": "10.12.0",
    "@types/underscore": "1.8.13",
    "@types/webpack-env": "1.13.6",
    "@typescript-eslint/eslint-plugin": "1.6.0",
    "@typescript-eslint/parser": "1.6.0",
    "acorn": "6.1.1",
    "awesome-typescript-loader": "5.2.1",
    "chai": "4.2.0",
    "check-node-version": "3.2.0",
    "css-loader": "1.0.0",
    "eslint": "5.16.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-loader": "2.1.2",
    "eslint-plugin-import": "2.16.0",
    "extract-text-webpack-plugin": "v4.0.0-beta.0",
    "file-loader": "2.0.0",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "ignore-styles": "5.0.1",
    "istanbul-instrumenter-loader": "3.0.1",
    "jsdom": "14.0.0",
    "jsdom-global": "3.0.2",
    "mocha": "6.1.2",
    "ng-annotate-loader": "0.6.1",
    "node-sass": "4.11.0",
    "rimraf": "2.6.2",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.1",
    "ts-node": "8.0.3",
    "typescript": "3.4.2",
    "uglifyjs-webpack-plugin": "2.0.1",
    "webpack": "4.23.1",
    "webpack-cli": "3.1.2",
    "webpack-merge": "4.1.4"
  },
  "dependencies": {
    "angular": "1.7.5",
    "core-js": "3.0.1",
    "growl": "1.10.5",
    "jquery": "3.3.1",
    "underscore": "1.9.1"
  }
}

I cannot share the source code, but I used this angularjs webpack starter project to start mine.

Answer 1

Issues with invalid sourcemaps in Webpack and terser-webpack-plugin are now addressed starting with webpack 4.39.2 and terser-webpack-plugin 1.4.0.

v4.39.0 release log:

webpack-sources + terser-webpack-plugin comes with quality optimizations for SourceMaps

There was an additional issue, whose fix was published later. It was included for webpack-sources v1.4.2/webpack 4.39.2. In conclusion 4.39.2or latest version is the one to go.

Sourcemaps in production mode seem to work as expected in most cases now. Unfortunately, if you have non trivial code transformations like inlining of functions (that exist in source code, but are dissolved from webpack) in the course of uglyfying/minification/optimization, breakpoints sometimes still don't get mapped well. Part of the reason is, that the sourcemap spec is very vague concerning those aspects.

Here is a sample repository, where you can experience breakpoint issues with inlining.