当使用webpack的文件加载器时,捆绑的资产似乎有一个错误的路径

├───content         // markdown files
├───dist
│   ├───assets      // contains bundle.js
│   │   ├───fonts   // contains ttf's with hashed names 
│   │   └───img     // contains img's with hashed names
│   └───site        // contains html files with <script src="../assets/bundle.js"></script>
└───src
    ├───assets
    │   ├───fonts   // contains real-name-fonts.ttf
    │   ├───img     // contains real-name-images.jpg
    │   ├───js      // contains my entry point site.js
    │   └───scss
    ├───config
    ├───layouts
    ├───partials
    └───scripts

这就是我的webpack.config.js的样子

module.exports = {
    mode: 'development', 
    entry: join(paths.webpackSrc, 'js', 'site.js'), // points to 'src/assets/js/site.js'
    plugins: [
        new CleanWebpackPlugin()
    ],
    output: {
        filename: 'bundle.js',
        path: paths.webpackDst, // points to 'dist/assets'
        publicPath: paths.webpackPublicPath, // points to '/assets/'
    },
    devServer: {
        contentBase: './dist',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    { loader: 'style-loader' },
                    { loader: 'css-loader' },
                    { loader: 'postcss-loader', options: { plugins: function () { return [require('autoprefixer')]; } } },
                    { loader: 'sass-loader' }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'fonts'
                }
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'img'
                }
            },        
        ]
    }
}

这是我的切入点的一部分 site.js

import 'bootstrap';
import 'popper.js'; 
import '../scss/_stylesheet.scss';

import Avatar from '../img/avatar.jpg';

var avatarImgNavbar = document.getElementById('avatar');
avatarImgNavbar.src = Avatar;

我可以看到webpack正在提取资产,它们确实显示在正确的对应项中 dist/assets/ dist/site 似乎找不到资源,尽管来自scss的样式正在得到应用。

为什么?我该怎么解决?