如何让 webpack 4 忽略图像 src答案

【问题标题】：How to get webpack 4 to ignore image src如何让 webpack 4 忽略图像 src
【发布时间】：2020-01-24 16:43:24
【问题描述】：

我正在使用带有 Webpack 4 的 CopyWebpackPlugin 将图像文件夹复制到生产构建中的 dist 文件夹，并且我不希望 Webpack 尝试解析或更改应用程序中的任何位置的<img src="./images/flower.png">。我的意思是任何模式下的任何地方。

例如，如果我使用 html-loader 将 HTML sn-p 加载到父 HTML 文件中，我不希望 Webpack 触及该 sn-p 中的 img src 值，因为 sn-p 及其关联图像可能是由对 Webpack 一无所知的设计师创建的。此外，应用程序可能有十几个或一百个这样的 sn-ps。我还不知道。

配置文件中的规则目前如下所示：

test: /\.(png|jpe?g|gif|svg)$/i,
use: [
  {
    loader: 'url-loader',
    options: {
      name: '[path][name].[ext]?hash=[hash:20]',
      esModule: false,
      limit: 8192
    }
  }
]

我想我需要在 Webpack 配置文件中添加、更改或删除一个简单的选项，但我不知道是哪一个。

我是 Webpack 的新手，我欢迎任何有关如何完成此任务的建议。

非常感谢，大卫。

【问题讨论】：

这可能是 html-loader 的问题。我仍然愿意接受任何建议。

标签： webpack

【解决方案1】：

我遇到了类似的问题，并通过将 html-loader 的 attributes 标志设置为 false 来解决它。

默认情况下每个可加载的属性（例如 - ) 被导入 (const img = require('./image.png') 或 import img from "./image.png"")。您可能需要为配置中的图像（推荐的文件加载器或 url-loader）。

https://webpack.js.org/loaders/html-loader/#attributes

【讨论】：

本，非常感谢。我已经放弃寻求帮助了。度过一个愉快的夏天。