Как правильно указать Webpack file-loader publicPath с такой структурой файлов?

Question

[Martovitskiy]

Структура:
├───assets
│ ├───scss
│ ├───js
│ ├───img
│ ├───plugins
│ └───index.html
├───dist
│ ├───css
│ ├───img
│ ├───js
│ └───index.html
└───webpack.config.js

index.html
<img src="img/exapmle.jpg" alt="exapmle">

main.sass

.home
  background: url("../img/example.jpg")

webpack.config.js

module: {
    rules: [
      {
        test: /\.(jpg|png|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              publicPath: 'img',
              outputPath: 'img',
              useRelativePath: true
            }
          },
          {
            loader: 'image-webpack-loader',
           ...
            }
          }
        ]
      }
    ]
  },

На production в dist вижу только картинку из html, если меняю на publicPath: '../', то не вижу в css

Пробовал решение

publicPath: function(url) {
    return url.replace(../, '/img/')
},

Answer 1

[Martovitskiy]

решил проблему с помощью copy-webpack-plugin