Q:

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

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.

A:

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.

A:

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

