如何让webpack 4忽略图像src

ntjbwcob  于 12个月前  发布在  Webpack
关注(0)|答案(2)|浏览(131)

我正在使用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的新手,我欢迎任何关于如何实现这一点的建议。
非常感谢,大卫。

xqk2d5yq

xqk2d5yq1#

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

j8ag8udp

j8ag8udp2#

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

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

字符串

相关问题