Webpack 如何解析*url加载程序*路径?
树结构的深处有一个HTML文件。它有这样一行:Webpack 如何解析*url加载程序*路径?,webpack,Webpack,树结构的深处有一个HTML文件。它有这样一行: <img src="../../images/call.svg"> 这是我的配置文件: var path=require('path'); module.exports={ 条目:'./src/app.js', 输出:{ 路径:'./dist', 文件名:“bundle.js” }, 模块:{ 装载机:[ { 测试:/\.html$/,, 加载器:“html加载器” }, { 测试:/\(jpe?g | png | gif | s
<img src="../../images/call.svg">
这是我的配置文件:
var path=require('path');
module.exports={
条目:'./src/app.js',
输出:{
路径:'./dist',
文件名:“bundle.js”
},
模块:{
装载机:[
{
测试:/\.html$/,,
加载器:“html加载器”
},
{
测试:/\(jpe?g | png | gif | svg)$/i,
加载器:“url”
}
]
}
};代码>使用网页配置中的htmlLoader
属性,可以将根属性传递给html加载程序
,并使用根相对路径。然后,相对路径将附加到此根属性以解析绝对路径
例如,如果要提供相对于src
目录的路径:
var path=require('path');
module.exports={
条目:'./src/app.js',
输出:{
路径:'./dist',
文件名:“bundle.js”
},
模块:{
装载机:[
{
测试:/\.html$/,,
加载器:“html加载器”
},
{
测试:/\(jpe?g | png | gif | svg)$/i,
加载器:“url”
}
]
},
htmlLoader:{
root:path.resolve(uu dirname,'src')
}
};
然后,您可以提供与src
目录相关的路径,例如:
<img src="/images/call.svg">
注意路径前面的前导/
,这就是你告诉html加载程序的方式,它是根相对路径,否则它仍然是相对于它自己的上下文。有一个类似的问题没有答案,先生,你太棒了!非常感谢你!我爱你!很高兴我能帮忙。
<img src="/images/call.svg">