如何让webpack 4忽略图像src

ntjbwcob 于 2023-11-19 发布在 Webpack

关注(0)|答案(2)|浏览(140)

我正在使用Webpack 4的CopyWebpackPlugin将images文件夹复制到生产构建中的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的新手，我欢迎任何关于如何实现这一点的建议。
非常感谢，大卫。

webpack

来源：https://stackoverflow.com/questions/59900588/how-to-get-webpack-4-to-ignore-image-src

2条答案

按热度按时间

xqk2d5yq1#

我也遇到过类似的问题，并通过将html-loader的attributes标志设置为false来解决它。
默认情况下，导入每个镜像属性（例如-< img src="image.png">）（const img = require（'./image.png'）或import img from“./image.png””）。您可能需要在配置中指定镜像的加载器（推荐的文件加载器或URL加载器）。
https://webpack.js.org/loaders/html-loader/#attributes

赞(0）回复(0）举报 2023-11-19

j8ag8udp2#

尝试对webpack.config.js使用以下设置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          // Disables attributes processing
          sources: false,
        },
      },
    ],
  },
};

字符串

赞(0）回复(0）举报 2023-11-19

我来回答

如何让webpack 4忽略图像src

2条答案

相关问题

热门标签

最新问答