如何使用 webpack 部署，只使用静态文件，包括用作 HREF 标签的文件？

问题描述

我有这些文件：

/html/pages/test.html
/assets/img/photo_small.png
/assets/img/photo_big.png

在 test.html 上，我有以下代码：

<a href="../../assets/img/photo_big.png">
   <img src="../../assets/img/photo_small.png"> 
</a>

当我用 WEBPACK 打包时，在 disT 文件夹中：

• IMG SRC 使用的图片：

  • 图像文件被散列并复制到 disT 文件夹；
  • 文件名字符串在 IMG SRC 标签处进行了哈希处理；
  • 图片很好地显示在标签 IMG 上。工作正常。

• HREF 标签中使用的图片：

  • 图像文件不会复制到 disT 文件夹；
  • IMG SRC 标签中的文件名字符串没有变化；
  • 当我点击图片（一个 HREF 链接）时，我得到了：

  net::ERR_FILE_NOT_FOUND

在我的 webpack conf 中：

module: {
    rules: [
        {
            test: /\.(gif|png|jpe?g|svg|webp)$/i,type: 'asset/resource'
        },{
            test: /\.html$|njk|nunjucks/,use: [
                {
                    loader: 'html-loader',options: {
                        sources:true
                    },},{
                    loader: 'nunjucks-html-loader',}
            ]
    ]
},plugins: [
    new HtmlWebpackPlugin({
      filename: 'test.html',inject: 'body',template: './src/html/pages/test.html'
    }),]

如何在没有 copyWebpackPlugin 的情况下修复它，只是让 disT 文件夹中仅使用文件？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）