Question

首先，它是一个webpack请求

假设我有一个css，内容很简单，就像这样

body{
  background: url('$my_path$/images/background.jpg')
}

和my_path是可变的，稍后会更改

我在这样的配置文件中设置了一个加载器

...
 loaders:[
     {test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: [
                'url!my-loader'
            ]},
]

我想要做的是在我的客户端加载器中它可以将变量替换为特定路径，因此以后url-loader可以正确加载正确的图像文件

但我不知道该怎么做

任何人都可以提供线索

谢谢

=======================

最后我写了一个装载机来解决它

module.exports = function(content) {
    this.cacheable && this.cacheable();
    var srcPath=loaderUtils.stringifyRequest(this,query.srcRoot||__dirname+"/src")).slice(1,-1);
    content=content.replace(new RegExp("%srcRoot%","g"),srcPath)
    return content;
}

并在html中，我在网址中添加了一个前缀，例如％srcRoot％/ images / a.jpg

到目前为止，这是工作

Answer 1

您可以在css中使用虚拟路径名，并使用alias

解决它

CSS：

body {
  background: url('images/background.jpg')
}

Webpack配置：

resolve: {
    alias: {
        images: "./actualPath"
    }
}

有没有办法在webpack加载之前更改图像URL

1 个答案: