Webpack 4 Load Library Sourcemap

Question

I have a library MyLib that I am loading inside MyApp. Both are compiled with webpack 4 and MyApp uses source-map-loader to load the source maps for MyLib. As of webpack 4 the sourcemaps point to a minified file instead of the original source code.

Debugging into MyLib now simply skips to the following source instead of the actual code:

(function webpackUniversalModuleDefinition(root, factory) { ... }

This used to work with webpack 2. What changed—or rather what do I need to change to get this to work again?

MyLib Webpack Config

{
    output: {
        path: helpers.root('dist'),
        filename: 'my-library.js',
        library: 'my-library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },  
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('tsconfig.json') }
                    },
                ],
            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJSPlugin({
                sourceMap: true
            })
        ]
    },
};

MyApp Webpack Config

...
{
    test: /\.(js|js\.map|map)$/,
    use: ['source-map-loader'],
    include: [
        helpers.root('node_modules', 'my-lib')
    ],
    enforce: 'pre'
},
...

EDIT

I added a repo that contains two folders library and user to demonstrate the problem. Use the init.sh script to install and link dependencies, place a breakpoint in user/src/main.ts and use Visual Code to run.

Answer 1

Since webpack v4 supports the new mode and devtool config, you can clean up your config files by removing many third-party plugins because they now come with webpack v4:

Try

1) removing the source-map-loader plugin

2) remove the following from config as well

new UglifyJSPlugin({
  sourceMap: true
})

Instead, just use the webpack built in mode and devtool config in webpack.config.js:

module.exports = {
  mode: process.env.NODE_ENV === 'development' ? "development" : "production",
  devtool: process.env.NODE_ENV === 'development' ? "inline-source-map" : "source-map"
  // ...
};

Answer 2

Turns out that this is related two two things:

• The library was configured as SomeLibrary in output.library instead of some-library. The name needs to match the name of the npm module (the folder name of the dependency in node_modules).
• When in development mode the sourcemap option of the using package was cheap-eval-source-map, which ignores loaders and therefore also the source-map-loader. Changing this to eval-source-map includes it.