Webpack File-loader returns 错误的子文件夹路径

Question

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

index.html
产品
- index.html
- 产品1
  - index.html

我正在使用文件加载器将图像加载到 js 文件中。这是我的 webpack 配置：

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-loader（我认为这是一个更好的解决方案）来避免通过 js 设置图像 src 但运行遇到了同样的问题。

Answer 1

您 HTML 链接是相对于 html 文件的。如果您在 assets/image.jpg 之类的网址前添加 / ，它将相对于您项目的根目录。例如。 https://localhost:3000/assets/image.jpg，或 https://www.mypage.com/assets/image.jpg，它应该可以正常工作。

Webpack File-loader returns 错误的子文件夹路径

Webpack File-loader returns wrong path to subfolder

webpack

subdirectory

html-webpack-plugin

webpack-file-loader

webpack-html-loader