Webpack如何将我的src / index.html中引用的图像加载到dist / images /

Question

我一直试图解决这个问题，但我似乎无法找到一个好的答案。如何自动加载index.html文件中引用的.svg，.png或.jpg图像？

<img src="./images/logo.svg" alt="" class="logo__image">

当我在我的scss文件中引用图像时，它会发生这样的事情：

.background {
  background: url('./images/logo.svg');
}

这是我的webpack配置规则：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  loaders: [
    {
      loader: 'file-loader',
      options: {
        attrs: ['img:src', 'source:srcset'],
        name: 'images/[name].[hash].[ext]'
      }
    }
  ]
}

Answer 1

您可以使用outputPath和publicPath

指定自定义输出和公共路径

<强> publicPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    publicPath: 'assets'
  }  
}

<强> outputPath

webpack.config.js

{
  loader: 'file-loader',
  options: {
    name: '[path][name].[ext]',
    outputPath: 'images'
  }  
}