webpack 构建多页面应用，background-image 图片无法正常显示

Question

问题背景

我使用 webpack 构建多页面 React 应用

1. 使用 scss-loader 解析 css 文件。
2. 使用 file-loader 处理图片
3. 使用 alias 为 assets 路径设置别名。
4. 在 scss 文件中使用 ~assets/path/to/image 为背景设置 background-url。
5. 使用 webpack-dev-server 本地运行调试

问题描述

在上述情况下设置背景图时，背景图在根目录的页面中可以正常显示，但在子目录的页面中浏览器报 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 时却无法正常访问。

因为几乎所有的页面都要用到顶部导航，所以我把它封装成了一个组件，上面的 scss 代码也就是组件的样式文件。请问我怎么才能使得每个页面都能正常显示这张 logo 图呢。

并且不仅共用的 logo 图片不能正常显示，即使子目录组件中单独设置的 scss 文件中的背景图也不能正常显示。

求教

Answer 1

你应该在原文件里写相对路径，然后webpack生成后会变成绝对路径。
比如
原代码里这么写的

.phoneBox {
    padding-top: 45px;
    width: 328px;
    height: 600px;
    float: Left;
    background-image: url(../img/phone.svg);
    background-repeat: no-repeat;
    border-radius: 28px;
    box-shadow: 2px 2px 20px rgba(0,0,0,.1);
}

经过webpack构建后

.phoneBox {
  padding-top: 45px;
  width: 328px;
  height: 600px;
  float: Left;
  background-image: url(//localhost/h5_view_2/images/phone-d6b6a6.svg);
  background-repeat: no-repeat;
  border-radius: 28px;
  box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); }