如何让Webpack解析manifest.json中的URL并替换哈希路径

• 用webpack-pwa-manifest插件自动处理图标和路径：别手动在manifest里写死图标URL，让插件帮你生成带哈希的图标并自动替换manifest里的路径。webpack配置示例：

  const WebpackPwaManifest = require('webpack-pwa-manifest');
  const path = require('path');
  
  module.exports = {
    plugins: [
      new WebpackPwaManifest({
        name: '你的应用名称',
        short_name: '应用短名',
        background_color: '#fff',
        theme_color: '#000',
        icons: [
          {
            src: path.resolve('src/assets/icon.png'), // 本地原始图标路径
            sizes: [96, 128, 192, 256, 384, 512], // 生成多尺寸适配不同设备
            destination: 'icons', // 输出到dist下的icons目录
            filename: '[name].[hash].[ext]' // 带哈希的文件名格式
          }
        ]
      })
    ]
  };
  

• 确保webpack能正确处理图片资源：webpack5+用asset/resource，旧版本用file-loader，配置生成带哈希的图片文件名：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(png|svg|jpg)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'images/[name].[hash][ext]'
          }
        }
      ]
    }
  };
  

• 别直接用静态目录里的manifest.json：手动写的manifest不会被webpack处理，必须通过插件生成，或者让webpack把它当成入口资源处理。
• 调试时清缓存：Chrome调试工具Network面板勾选“禁用缓存”，避免浏览器加载旧的manifest文件。
• 检查构建后的manifest：去dist目录里看生成的manifest.json，确认图标路径是不是已经替换成带哈希的了，如果没换，大概率是插件配置错了，比如源图标路径写错或者插件没正确引入。

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