Webpack中如何使JS与对应Source Map文件的[contenthash]一致？

当前JS文件和其Source Map文件的[contenthash]不一致，原因是Webpack对两者计算哈希的依据不同：JS文件的[contenthash]基于自身代码内容，而Source Map文件的[contenthash]基于生成的map文件内容，所以哈希值自然不一样。

下面是两种可行的解决方法：

方法一：使用[file]占位符（推荐） #

直接修改output.sourceMapFilename为[file].map，这个占位符会自动复用对应JS文件的完整文件名（包括已生成的[contenthash]），配置示例：

module.exports = {
  mode: 'production',

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

  devtool: 'source-map',

  // ...其余配置
}

打包后就能得到哈希完全一致的文件对：
main.30f7af17dd32cf7cbaf8.js
main.30f7af17dd32cf7cbaf8.js.map

方法二：改用[chunkhash]替代[contenthash] #

[chunkhash]是基于整个chunk的内容计算哈希，JS文件和其Source Map属于同一个chunk，因此哈希值会完全一致。配置示例：

module.exports = {
  mode: 'production',

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

  devtool: 'source-map',

  // ...其余配置
}

注意：[contenthash]更精准，仅在文件自身内容变化时更新哈希；而[chunkhash]会随chunk内任意文件变化而更新。如果项目有代码分割需求，方法一的灵活性更高。

内容的提问来源于stack exchange，提问作者Pavils Dzirkalis