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.

Did you mean *bunldes* and maps? – Ivan Mar 27 '17 at 19:45 — Ivan, Mar 27 '17 at 19:45

score 13 · Accepted Answer · edited Sep 01 '22 at 06:03

13

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

and then serve only from the bundles folder.

edited Sep 01 '22 at 06:03

Willem Renzema

answered Mar 27 '17 at 19:40

Ivan

ohhh thanks a lot. Really good answer and I believe I need to read the webpack guide from the very beginning again... – frankxu0203 Mar 28 '17 at 03:04
1

Ivan thanks for your answer. Maybe you can do it even better by adding a link to the [docs](https://webpack.js.org/configuration/output/#output-sourcemapfilename). – Mosh Feu Nov 15 '18 at 06:00

score 13 · Answer 2 · answered Apr 23 '18 at 12:05

13

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

answered Apr 23 '18 at 12:05

D0m3

I find this suggestion very important, because sourcmap file name must match what referenced inside the minified file. – Townsheriff Oct 18 '21 at 14:38

2 Answers2