webpack 構(gòu)建多頁面應(yīng)用，background-image 圖片無法正常顯示

問題背景

我使用 webpack 構(gòu)建多頁面 React 應(yīng)用

1. 使用 scss-loader 解析 css 文件。
2. 使用 file-loader 處理圖片
3. 使用 alias 為 assets 路徑設(shè)置別名。
4. 在 scss 文件中使用 ~assets/path/to/image 為背景設(shè)置 background-url。
5. 使用 webpack-dev-server 本地運行調(diào)試

問題描述

在上述情況下設(shè)置背景圖時，背景圖在根目錄的頁面中可以正常顯示，但在子目錄的頁面中瀏覽器報 404，webpack 沒有抱任何錯。說明路徑是沒錯的，也被 file-loader 壓縮處理了。

懇求大佬指點！

部分代碼

• webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

module.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/pages/index'),
        'course/index': path.resolve(__dirname, 'src/pages/course/index'),
        'course/detail': path.resolve(__dirname, 'src/pages/course/detail'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name][hash].js',
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist',
        port: '3030',
        hot: true,
    },
    resolve: {
        extensions: ['.css', '.scss', '.js', '.jsx', 'json'],
        alias: {
            common: path.resolve(__dirname, 'src/common'),
            assets: path.resolve(__dirname, 'src/assets'),
            style: path.resolve(__dirname, 'src/style'),
            components: path.resolve(__dirname, 'src/components')
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }, {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            }, {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            }, {
                test: /\.(jpg|png|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 2048 
                    }
                }]
            }
        ],
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'Wall',
            template: './src/template.ejs',
            filename: 'index.html',
            chunks: ['index'],
        }),
        new HtmlWebpackPlugin({
            title: 'course',
            template: './src/template.ejs',
            filename: 'course/index.html',
            chunks: ['course/index'],
        }),
        new HtmlWebpackPlugin({
            title: 'detail',
            template: './src/template.ejs',
            filename: 'course/detail',
            chunks: ['course/detail'],
        })

    ]
}

• scss

.layout {
    .header {
        .logo {
            float: left;
            background: url('~assets/images/logo.png') no-repeat;
            background-size: auto 31px;
            height: 31px;
            width: 150px;
            margin: 16px 24px 16px 0;
        }
    }
}

以上面的 logo 的圖來說，我訪問 localhost:3030 時是可以正常顯示的，同樣的樣式訪問 localhost:3030/course 時卻無法正常訪問。

因為幾乎所有的頁面都要用到頂部導(dǎo)航，所以我把它封裝成了一個組件，上面的 scss 代碼也就是組件的樣式文件。請問我怎么才能使得每個頁面都能正常顯示這張 logo 圖呢。

并且不僅共用的 logo 圖片不能正常顯示，即使子目錄組件中單獨設(shè)置的 scss 文件中的背景圖也不能正常顯示。

求教