Question

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

例如，如果我使用html-loader将HTML代码段加载到父HTML文件中，则我不希望Webpack触摸该代码段中的img src值，因为该代码段及其相关图像可能是由对Webpack一无所知的设计师。此外，该应用程序可能包含十几个或一百个这样的摘要。我还不知道。

当前配置文件中的规则如下：

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的新手，我欢迎有关如何实现此目的的任何建议。

非常感谢，大卫。

Answer 1

我遇到了类似的问题，并通过将html-loader的{{1}}标志设置为false来解决了这个问题。

默认情况下，每个可加载属性（例如-）导入（const img = require（'./ image.png'）或从“ ./image.png”导入img）。您可能需要为配置中的图片（推荐的文件加载器或url加载器）。

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

如何使Webpack 4忽略图像src

1 个答案: