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' 
    } 
}