Debugging and source maps

Why source maps matter

Bundled and minified code is hard to debug. Source maps map bundled code back to original source files, line-by-line. Browser dev tools use source maps to show you original code, not minified code. Enable in development, consider disabling in production.

Enable source maps

Configure devtool for different environments.

module.exports = {
  devtool: process.env.NODE_ENV === 'production' 
    ? 'source-map' 
    : 'eval-source-map',
  // source-map: separate file, slower build, best quality
  // eval-source-map: eval, faster build, good quality
  // false: no source map
};

Output:

Source maps generated based on environment

Choose devtool wisely

Development: 'eval-source-map' for speed. Production: 'source-map' for debugging uploaded bundles, but upload to monitoring service, not browser. Or use 'hidden-source-map' to generate maps without exposing them.

Quick check

Quick check: What do source maps provide?

• Compression of JavaScript files.
• Mapping from bundled code back to original sources.
• Security protection for code.
• Automatic bug fixing at runtime.