HTML Bundler Webpack Plugin资源目录结构保留异常求助

1. 核心原因：Webpack仅打包被引用的资源 #

Webpack是按需打包工具，只有当weather-icons目录下的SVG被你的HTML、JS或CSS文件显式引用时，才会被打包到dist目录。如果这些SVG没有被任何文件引用，Webpack会直接忽略它们，自然不会生成对应的目录。

验证与解决 #

检查代码中是否有引用weather-icons里的SVG，比如：

• HTML示例：<img src="./assets/imgs/weather-icons/sun.svg">
• CSS示例：background: url('../assets/imgs/weather-icons/rain.svg')
• JS示例：import sunIcon from '../assets/imgs/weather-icons/sun.svg'

若未引用，需添加对应引用；如果需要自动打包未被引用的静态资源，可额外配置copy-webpack-plugin来复制整个目录。

2. 正则表达式的路径匹配问题 #

你的正则使用了path.normalize(srcPath)，在Windows系统下会将路径分隔符转为\，可能导致匹配失败。可优化正则写法，适配不同系统的路径分隔符：

const srcPath = "src/assets/imgs";
// 适配系统路径分隔符，避免匹配失败
const regExp = new RegExp(
  `(?:${srcPath.replace(/[\\/]/g, '\\\\/')}|node_modules)${path.sep}(.+?)$`
);

3. 无效的多路径写法（之前方案失效原因） #

你之前用的srcPath = "src/assets/imgs" || "src/assets/imgs/icons" || ...是错误逻辑——逻辑或||只要第一个值为真就返回第一个值，后面的路径根本不会被纳入正则匹配。之前的项目只是巧合（所有目录下的资源都被引用了），所以看起来生效了，实际上这个写法没有任何作用。

4. HTML Bundler Webpack Plugin配置检查 #

确保插件开启了scanAssets选项，自动扫描HTML中引用的静态资源：

plugins: [
  new HtmlBundlerPlugin({
    entry: {
      index: './src/index.html',
    },
    scanAssets: true, // 开启自动扫描静态资源
    // 其他配置...
  }),
]

额外验证步骤 #

• 检查weather-icons下的SVG文件名是否包含特殊字符（如空格、中文），导致Webpack无法匹配规则；
• 清理Webpack缓存（删除node_modules/.cache或执行webpack --clean），避免缓存导致的异常；
• 临时简化配置，测试是否能正常打包：

  generator: {
    filename: 'imgs/[path][name].[contenthash:8][ext]',
  }
  

  若此配置能生成weather-icons目录，说明之前的正则匹配逻辑存在问题。

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