Webpack 输出 [contenthash].js 和 [contenthash].js.map 名称不同

Question

module.exports = {
 mode: 'production',

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

 devtool: 'source-map',

...
}

这个输出是：
main.30f7af17dd32cf7cbaf8.js
main.b36bc3ff7d50578c264a6340c629db1c.js.map

如何为两个文件获得相同的 [contenthash] 部分？

Answer 1

我也被这个小问题搞得退缩了。

你有两个选择；

1. 如果你希望你的源地图出现在与你的源文件相同的文件夹中（即它们完全相同，但它们只附加了 .map），那么只需从你的设置中删除

   sourceMapFilename

   选项，webpack 就会使用与源相同的文件名创建它们，并附加 .map。

例如从上面的示例中，将其更改为；

module.exports = {
 mode: 'production',

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

 devtool: 'source-map',

...
}

2. 如果您想更改文件的最终位置（例如，我想将它们全部保存到 /maps 子文件夹中）并且您正在使用 [contenthash]，对于您的

   sourceMapFilename

   设置，您将需要使用 '[文件].map'

这会将 .map 附加到它生成的文件的末尾，从而生成与源 js 文件名匹配的地图文件。

例如从上面的示例中，将其更改为；

module.exports = {
 mode: 'production',

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

 devtool: 'source-map',

...
}