Webpack 网页包文件加载器返回错误的子文件夹路径

我正在制作一个有多个入口点的网站。具有以下结构

• index.html
• 产品
  • index.html
  • 产品1
    • index.html

我正在使用文件加载器加载js文件上的图像。这是我的网页配置：

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    index: './src/index.js',
    products: './src/pages/products/products.js',
  },
  output: {
    filename: '[name].[hash:20].js',
    path: path.resolve(__dirname, "../dist")
  },

  module: {
    rules: [
      {
        test: /\.(woff|woff2|ttf)$/,
        use: ['url-loader']
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          outputPath: 'assets'
        }
      },
      {
        test: /.(css|scss)$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: 'postcss-loader',
            options: {
              plugins: function () {
                return [
                  require('autoprefixer')
                ];
              }
            }
          },
          "sass-loader"]
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../src/index.html"),
      inject: true,
      chunks: ['index'],
      filename: 'index.html'
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../src/pages/products/products.html"),
      inject: true,
      chunks: ['products'],
      filename: 'products/index.html'
    }),
    new HtmlWebpackPlugin({
      template: path.join(__dirname, "../src/pages/product/product1/product1.html"),
      inject: true,
      chunks: ['product1'],
      filename: 'products/product1/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
      chunkFilename: "chunk-styles.css"
    }),
  ]
};

所有资产都内置在

dist/assets

中，我通过在js中导入它们来访问它们。 给定图像的index.html中的结果url是

assets/[image hash]

问题是，任何子文件夹中的html都会找到任何内容，因为它正在查看它们的子文件夹级别。相反，它们工作的url应该是

。/assets/[image hash]

和

。/../assets/[image hash]

，以获得更深层次的信息

如何修改生成的URL以始终在根文件夹中查找，或在我拥有的每个子文件夹中生成所需的图像？

---

我还尝试使用html加载程序（我认为这是一个更好的解决方案）来避免通过js设置图像src，但遇到了同样的问题。

您的html链接与html文件相关。如果在URL前面添加一个

/

，如

assets/image.jpg

，它将相对于项目的根。例如，

https://localhost:3000/assets/image.jpg

，或

https://www.mypage.com/assets/image.jpg

它应该可以正常工作