Webpack output [contenthash].js and [contenthash].js.map name differs

Question

module.exports = {
 mode: 'production',

 output: {
  publicPath: '/',
  path: path.resolve(__dirname, 'public/'),
  filename: '[name].[contenthash].js',
  sourceMapFilename: '[name].[contenthash].js.map'
 },

 devtool: 'source-map',

...
}

Output of this is :
main.30f7af17dd32cf7cbaf8.js
main.b36bc3ff7d50578c264a6340c629db1c.js.map

How can I get same [contenthash] part for both files?

Answer 1

I got set back by this little gotcha too.

You have two options;

1. If you want your source maps to appear in the same folder as your source files (i.e. they are exactly the same but they only have .map appended to them), then simply just remove the sourceMapFilename option from you settings and webpack will create them them with the same file name as the source with .map appended.

e.g. from your example above, change it to;

module.exports = {
 mode: 'production',

 output: {
  publicPath: '/',
  path: path.resolve(__dirname, 'public/'),
  filename: '[name].[contenthash].js'
 },

 devtool: 'source-map',

...
}

2. If you want to change the where the files end up, (for example, I wanted to have them all saved to a /maps sub-folder) and you are using [contenthash], for your sourceMapFilename setting you will want to use '[file].map'

This will append .map to the end of the file it generates, resulting in a map file that matches the source js file name.

e.g. from your example above, change it to;

module.exports = {
 mode: 'production',

 output: {
  publicPath: '/',
  path: path.resolve(__dirname, 'public/'),
  filename: '[name].[contenthash].js',
  sourceMapFilename: 'maps/[file].map'
 },

 devtool: 'source-map',

...
}