Webpack и проблема с url-фоном после сборки - PullRequest
Новая
       43

Webpack и проблема с url-фоном после сборки

1 голос
/ 06 августа 2020

У меня проблема, что после создания приложения с React у меня нет фонового изображения на страницах github.

Это моя структура проекта: 

root
|_api
  |__{folders with json files}
|_res
|_src
  |_index.html
  |_styles.css
  |_{other sources}

Это мой dist после сборки: 

root/dist
|_api
|_res
|_index.html
|_index.js

Это мой стиль, который я использую в index.html: 

.body-area {
    margin: 0;
    background-color: black;
    background-image: url(/res/background.png);
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: top;
}

И это конфигурация веб-пакета, которую я использую: 

const {resolve} = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const JSONMinifyPlugin  = require('node-json-minify');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config = {
    entry: {
        main: resolve('./src/index.tsx'),
    },
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: ['awesome-typescript-loader?module=es6'],
                exclude: [/node_modules/]
            },
            {
                test: /\.js$/,
                loader: 'source-map-loader',
                enforce: 'pre'
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',
                        options: {minimize: true}
                    }
                ]
            },
            {
                test: /\.(css|scss)$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader'
            }
        ]
    },
    optimization: {
        minimize: true
    },
    mode: "production",
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin([
            {
                from: 'res',
                to: 'res'
            },
            {
                from: 'api',
                transform(content, path){
                    if(path.endsWith(".png")) return content;
                    console.log("Minifying: " + path);
                    return JSONMinifyPlugin(content.toString())
                },
                to: 'api'
            }
        ]),
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
    ]
};

module.exports = config;

После сборки мое фоновое изображение css выглядит так же, как и в стилях. css

background-image: url(/res/background.png);

Мне нужно менять его после каждой сборки на:

background-image: url(res/background.png);

И только потом начинает корректно отображать фон на ГП. Есть ли способ автоматизировать это с помощью Webpack? Или я просто неправильно использую какие-то другие плагины?

1 Ответ

0 голосов
/ 08 августа 2020

Где находится поле «output» в вашем файле конфигурации Webpack? 

output: {
    filename: 'js/[name].bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  }

И, возможно, вам нужно использовать что-то вроде этого для конфигурации C "opyWebpackPlugin" 

    new CopyWebpackPlugin({
      patterns: [
        {
          from: `${__dirname}/client/index.html`,
          to: 'index.html'
        }
      ]
    })
...