Вопрос:
Моя проблема: я хочу иметь два изображения в качестве фоновых изображений. Я включил их в свой проект, и я использую файловый загрузчик, чтобы связать их с помощью webpack. И пока я нахожусь в среде разработки (поэтому, используя webpack-dev-server), они отображаются в моем приложении правильно. Но когда я развернул приложение в Heroku, фоновые изображения исчезли. Я предполагаю, что с моим сервером узлов что-то не так, так как все работает отлично с webpack-dev-сервером.
Мой вопрос: что мне нужно делать, чтобы иметь изображения как в среде разработки, так и в производственной среде? Измените что-нибудь в 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; } } }
Ниже приведена структура файлов. 
Лучший ответ:
Вы не предоставили полную незавершенную структуру проекта. Я не могу сказать, где хранятся файлы изображений или ваши файлы 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-сервера.
Шаг 3:
.background { background-image: url(‘/src/media/images/***.jpg’); }
Измените весь свой путь фонового изображения в ваших scss файлах.
Затем его сделать. Все ваши образы могут быть доступны всем вашим node.js и webpack-dev-сервером.
