我正在使用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的新手,我欢迎任何关于如何实现这一点的建议。
非常感谢,大卫。
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
j8ag8udp2#
尝试对webpack.config.js使用以下设置:
字符串