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，它应该可以正常工作。

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

1 个答案: