Webpack File-loader 返回错误的子文件夹路径答案

【问题标题】：Webpack File-loader returns wrong path to subfolderWebpack File-loader 返回错误的子文件夹路径
【发布时间】：2020-03-24 13:42:39
【问题描述】：

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

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，但遇到了同样的问题。

【问题讨论】：

标签： webpack subdirectory html-webpack-plugin webpack-file-loader webpack-html-loader

【解决方案1】：

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

【讨论】：