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

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都可以找到任何东西，因为它在其子文件夹级别内。使它们起作用的网址应改为../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，它应该可以正常工作。