HTML Bundler Webpack 插件 - 保留资产目录结构问题

Question

我正在使用 HTML Bundler Webpack 插件并按照文档保留资产的目录结构：https://github.com/webdiscus/html-bundler-webpack-plugin?tab=readme-ov-file#how-to -保留资产的源目录结构。

我在另一个项目中使用过这个插件，并且能够保留目录结构，但这次不起作用。我有：

- src
  - assets
    - imgs
      - icons
      - weather-icons

插件仅输出：

- dist
  - assets
    - imgs
      - icons

就好像天气图标文件夹不存在一样。

这是我的配置：

      {
        test: /\.(png|jpe?g|ico|webp|avif|svg|)$/,
        type: "asset/resource",
        generator: {
          filename: ({ filename }) => {
            // Keep directory structure for images in dist folder
            const srcPath =
              "src/assets/imgs";

            const regExp = new RegExp(
              `[\\\\/]?(?:${path.normalize(srcPath)}|node_modules)[\\\\/](.+?)$`
            );
            const assetPath = path.dirname(
              regExp.exec(filename)[1].replace("@", "").replace(/\\/g, "/")
            );

            return `imgs/${assetPath}/[name].[contenthash:8][ext]`;
          },
        },
      },

在之前的项目中，我遇到了同样的问题，捆绑包不包含我的 asset/imgs 子文件夹，因此我在 srcPath 中包含了多个路径，如下所示：

 const srcPath =
              "src/assets/imgs" ||
              "src/assets/imgs/icons" ||
              "src/assets/imgs/weather-icons";

这个解决方案解决了我其他项目中的问题，但是，它在这个项目上对我不起作用，我不确定我做错了什么。我比较了两个项目的配置/语法，它们是相同的。

如果有用，这是我这个项目的整个 webpack 配置：

const path = require("path");
const HtmlBundlerPlugin = require("html-bundler-webpack-plugin");

module.exports = {
  stats: { children: true },
  mode: "development",
  output: {
    path: path.join(__dirname, "dist/"),
    clean: true,
  },

  resolve: {
    alias: {
      "@scripts": path.join(__dirname, "src/js"),
      "@styles": path.join(__dirname, "src/styles"),
      "@images": path.join(__dirname, "src/assets/imgs"),
    },
  },

  devtool: "source-map",

  plugins: [
    new HtmlBundlerPlugin({
      entry: [
        {
          import: "./src/views/index.html", 
          filename: "index.html", 
          data: {
            title: "Weather App",
          }, 
        },
      ],

      js: {
        // output filename for JS
        filename: "js/[name].[contenthash:8].js",
      },

      css: {
        // output filename for CSS
        filename: "css/[name].[contenthash:8].css",
      },
    }),
  ],

  module: {
    rules: [
      {
        test: /\.(css|sass|scss)$/,
        use: [
          {
            loader: "css-loader",
            options: {
              import: false, 
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|ico|webp|avif|svg|)$/,
        type: "asset/resource",
        generator: {
          filename: ({ filename }) => {
            const srcPath =
              "./src/assets/imgs" ||
              "./src/assets/imgs/icons" ||
              "./src/assets/imgs/weather-icons";

            const regExp = new RegExp(
              `[\\\\/]?(?:${path.normalize(srcPath)}|node_modules)[\\\\/](.+?)$`
            );
            const assetPath = path.dirname(
              regExp.exec(filename)[1].replace("@", "").replace(/\\/g, "/")
            );

            return `imgs/${assetPath}/[name].[contenthash:8][ext]`;
          },
        },
      },
    ],
  },

  devServer: {
    static: path.resolve(__dirname, "dist"),
    watchFiles: {
      paths: ["src/**/*.*"],
      options: {
        usePolling: true,
      },
    },
  },
};

我认为天气图标文件夹本身可能有问题，所以我将其从我的存储库中删除并重新添加，但这并没有解决问题。我的 imgs 目录的子目录中的所有文件都是 .svg 格式。

我尝试过寻找这个问题，但我找到的有关保持目录结构的解决方案都不是特定于 HTML Bunder Webpack 插件的。

我是否缺少任何东西来完成这项工作？谢谢。

Answer 1

问题出在

weather-icons.js

文件中：

const clearDay = new Image();
clearDay.src =
  "/Users/jguneratne/repos/weather-app/src/assets/imgs/weather-icons/clear-day.svg";

new Image()

中使用的此图像文件将不会通过Webpack进行处理。

您应该使用

require()

功能：

export const weatherIconsData = {
  "clear-day": require("@images/weather-icons/clear-day.svg"),
  ...
}

其中

@images

是图像目录的 Webpack 别名。