使用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訪問圖像。

第三步：

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

更改您的scss文件中的所有背景圖像路徑。

然后完成它。您的所有映像都可以被node.js和webpack-dev-server都訪問。