Usage no npm install needed!

<script type="module">
  import webpackHmrSourcemaps from 'https://cdn.skypack.dev/webpack-hmr-sourcemaps';
</script>

README

Purpose

NB: Only use this plugin when serving a NodeJS app from Webpack HMR

When using webpack HMR, if you want source maps, you have two options: - devtool: 'source-map' or equivalent => takes a long time to recompile (when watching changes) - devtool: 'eval-source-maps' or equivalent => broken stacktraces, wrong files in maps.

Usage

DO NOT REGISTER source-map-support when using this plugin.

const webpack = require('webpack');
const HmrEvalSourceMapDevToolPlugin = require('webpack-hmr-sourcemaps');

module.exports = {
    // [...]
    devtool: prod ? 'source-map' : false,
    plugins: [
        ...prod ? [] : [
            new webpack.HotModuleReplacementPlugin(),
            new HmrEvalSourceMapDevToolPlugin({
                columns: true,
                module: true,
            })
        ],
    ]
}