Can I place webpack source maps and source code files in seprate folders?

Question

I read this question source maps files in production - is it safe?. I want to generate source map files in different folders with source code. Is there any way to do this with webpack? I also read this thread Relative SourceMap paths for debugging in WebStorm and tested but failed again.

Peder

Did you mean bunldes and maps? – Inspirational

Answer 1

You can use output.sourceMapFilename like so:

output: {
    filename: "bundles/[name].[chunkhash].min.js",
    sourceMapFilename: 'maps/[name].[chunkhash].map.js'
},

and then serve only from the bundles folder.

Inspirational

ohhh thanks a lot. Really good answer and I believe I need to read the webpack guide from the very beginning again... – Peder

Ivan thanks for your answer. Maybe you can do it even better by adding a link to the docs. – Activate

Answer 2

As Ivan wrote, the solution is to use output.sourceMapFilename

However, recommended solution from webpack doc is to only use [file] placeholder (default value is [file].map).

It is then best to define the value as following:

output: {
    filename: 'js/[name]-[chunkhash].js',
    sourceMapFilename: 'sourceMap/[file].map'
},

You will then preserve structure and it will also work for css sourceMaps

Photocathode

I find this suggestion very important, because sourcmap file name must match what referenced inside the minified file. – Dudley