javascript - 如何设置多路径以使用 Webpack 文件加载器导出图像文件

Question

我正在研究 Webpack 来构建我的模块包。我使用文件加载器在 javascript 中加载图像文件。这些行用于加载图像文件：

  {
    test: /\.(jpe?g|png|gif|svg)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        }
      },
      'image-webpack-loader'
    ]
  }

但我有麻烦。图像路径未按预期在 css 中编译。我的应用程序具有结构：

图片由app/views/index.pug 中的require()加载：

img(src= require('../images/logo.png'), alt= 'logo')

和背景图像： app/styles/style.css 中的url() ：

.test {
  background-image: url('../images/logo.png');
}

====== 编译后build/index.html中的图片路径为：

<img src="images/logo.png" alt="logo">

但 build/css/style.css 中的图像路径是：

.test {
  background-image: url(images/logo.png);
}

如何检测文件加载器何时扫描 html 或 css 中的图像？或者有什么办法可以解决这个问题？

谢谢你。