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访问。

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

1 个答案: