webpack 5导入图片和字体，在prod中重写url

Question

我需要将图像和字体文件复制到 dist 目录中的相应文件夹，问题是在最终的 css 文件中我得到了错误的 url 路径。我试图禁用 url css-loader 然后根本不复制文件。尝试将 ~ 添加到 url 。我需要使用 asset/resource 在样式表中复制并粘贴正确的路径。其他各种过时的解决方案对我不起作用。

My webpack 5 config

我少导入文件到main.js。

我的文件夹结构

Answer 1

自定义 publicPath 以指向提供静态文件的文件夹。

Answer 2

我通过添加 publicPath: "." 解决了我的问题，为什么引号中有一个点？因为我在 url 本身中有路径 ./，所以我添加一个点，我可以退出目录。

对于字体，我创建了一个生成器来创建一个单独的文件夹，路径的工作原理相同。

output: {
    path: path.resolve(__dirname, "dist"),
    publicPath: ".",
    assetModuleFilename: "./img/[name].[ext]",
    clean: true,
  },
  
  {
        test: /\.(jpe?g|png|gif|svg)$/i,
        type: "asset/resource",
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: "asset/resource",
        generator: {
          filename: "./fonts/[name][ext]",
        },
      },

webpack 5导入图片和字体，在prod中重写url

Webpack 5 import images and fonts, rewrite url in prod

javascript

less

webpack