使用 webpack 和 node.js 时不显示图像

Question

我的问题：我想要两张图片作为背景图片。我将它们包含在我的项目中，并使用文件加载器使用 webpack 将它们捆绑在一起。只要我在开发环境中（所以使用 webpack-dev-server），它们就会正确地出现在我的应用程序中。但是当我将应用程序部署到 Heroku 时，背景图像就消失了。我的猜测是我的节点服务器出了点问题，因为 webpack-dev-server 一切正常。

我的问题：我必须做什么才能在开发和生产环境中都有图像？更改 Node.js 中的某些内容？使用其他装载机？更改我导入图片的方式？

webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        app: ['babel-polyfill', './src/index.js']
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: ".",
        headers: {
            "Access-Control-Allow-Origin": "*"
        },
        inline: true,
        historyApiFallback: true,
        port: 8888
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                        plugins: ["transform-class-properties"]
                    }
                }
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /^.*\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader?importLoaders=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                    'postcss-loader',
                    'sass-loader'
                ],
            }
        ]
    }
};

webpack.prod.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015', 'react'],
                        plugins: ["transform-class-properties"]
                    }
                }
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {}
                    }
                ]
            },
            {
                test: /^.*\.(css|scss)$/,
                use: [
                    'style-loader',
                    'css-loader?importLoaders=1&modules&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
                    'postcss-loader',
                    'sass-loader'
                ],
            }
        ]
    }
});

server.js

const express = require('express');
const path = require('path');
const port = process.env.PORT || 8888;
const app = express();

app.use(express.static(__dirname));

app.get('*', (req, res) => {
   res.sendFile(path.resolve(__dirname, 'index.html'))
});

app.listen(port);
console.log('server started');

图片使用示例，ShareABook.scss

@import '../../theme/shareABook_theme.scss';
@import "../../theme/mixins.scss";

.shareABook_wrapper {

      @include centre-inside-div;
      flex-direction: column;
    }

    .firstComponent {
      height: 100%;
      width: 100%;
      @include centre-inside-div;
      flex-direction: column;
      .background {
        background-image: url('../../media/images/book4.jpg');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 1253px;
        width: 1880px;
        z-index: 1;
        display: block;
        filter: opacity(0.5);
      }
      .welcomeMessage {
        z-index: 9999;
        position: absolute;
        font-size: $font-size-typo-display-4;
        font-weight: $font-weight-bold;
        margin-top: -10rem;
        text-align: center;
        .mainMessage {
          font: $fancy-font;
        }
      }
    }

以下是我的文件结构。

Answer 1

您没有提供完整的未折叠项目结构。我不知道图像存储在哪里或您的 scss 文件存储在哪里。不过也够了。

例如，如果您的图片都存储在“src/media/images”中。

第 1 步：

app.use('/src/media/images/', express.static(__dirname, 'src', 'media', 'images'));

将此添加到您的 server.js，以确保可以从 node.js 访问图像。

第 2 步：

entry: {
    publicPath: '/src/media/images/',
}

将此添加到您的 webpack.dev.js，以确保可以从 webpack-dev-server 访问图像。

第 3 步：

.background {
    background-image: url('/src/media/images/***.jpg');
}

更改 scss 文件中的所有背景图像路径。

然后它就完成了。你的所有图像都可以被你的 node.js 和 webpack-dev-server 访问。