webpack-source-map-fix-plugin

Webpack plugin to fix trivial path problems in source maps

Usage no npm install needed!

<script type="module">
  import webpackSourceMapFixPlugin from 'https://cdn.skypack.dev/webpack-source-map-fix-plugin';
</script>

README

Webpack Source Map Fix Plugin

DEPRECATION NOTICE

The same or even better effect could be reached without this plugin if you will use alternative webpack configuration for devtoolModuleFilenameTemplate:

modules.exports = {
  ...

  output: {
    ...

    devtoolModuleFilenameTemplate: function (info) {
      var relPath = info.resourcePath
        .replace(/^.*(~|node_modules)/, '~')
        .replace(/^(webpack:\/\/\/)+/, '')
        .replace(/^\.\//, '')
        .replace(/^\(webpack\)-/, '(webpack)/')
        .replace(/^webpack\/bootstrap/, '(webpack)/bootstrap');
      return 'webpack:///' + relPath + '?' + info.hash;
    }
  }

  ...
};

Why?

Have you ever seen source map paths like below?

  • webpack:///./~/bla-bla-bla
  • webpack:///./bla-bla-bla
  • webpack:///~/bla-bla-bla
  • webpack:///webpack:///bla-bla-bla
  • webpack:////bla-bla-bla//bla-bla-bla
  • webpack:///(webpack)-bla-bla-bla
  • webpack:///(webpack)/bla-bla-bla
  • webpack:///webpack/bootstrap bla-bla-bla

This plugin performs a trivial fix on source map path to normalize path:

var relPath = path
  .replace(/^.*~/, '~')
  .replace(/^(webpack:\/\/\/)+/, '')
  .replace(/^\.\//, '')
  .replace(/^\(webpack\)-/, '(webpack)/')
  .replace(/^webpack\/bootstrap/, '(webpack)/bootstrap');
return 'webpack:///' + relPath + '?' + info.hash;
  • /~/ is well know alias for node_modules when css import is used
  • /./ is relative to root import
  • webpack:///webpack:/// comes from buggy url rewrite engine

Usage

npm install webpack-source-map-fix-plugin --save-dev

webpack.config.js:

...

var SourceMapFixPlugin = require('webpack-source-map-fix-plugin');

module.exports = {
  ...
  devtool: 'source-map',
  ...
  plugins: [
    ...
    new SourceMapFixPlugin()
  ];
  ...
}

Limitations

Current verson will work only if source maps are bundled in separate files.