chrome not show original variable names when debugging a bundled javascript file build by webpack

user_1868609 0
Viewed 374

I use this code to config webpack 5:

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devtool: "source-map"
};

and this is my index.js code,

const bar=require('./bar.js');
let a=1
console.log(a)
bar();

When debugging, I can not access the variable named "a" enter image description here

Is this a bug of webpack? I remember its not like this when I worked with an earlier verison of webpack years ago.

enter image description here

webpack
1 Answers

Shamelessly copied from (my own) comments...

If you look at the compiled bundle you'll see why - my guess is that during bundling webpack has inlined the value of a and removed the a variable declaration altogether, as hinted at on the left-hand-side of your image, under Scope > Local.

You can have webpack bundle in such a way that identifiers are not mangled - take a look at options available on the optimization field, eg. minimize: false.

user_20392440
Related