Как настроить веб-пакет так, чтобы путь к изображению в скомпилированном js был правильным? - PullRequest
Новая
       6

Как настроить веб-пакет так, чтобы путь к изображению в скомпилированном js был правильным?

0 голосов
/ 19 июня 2020

Цель: написать сайт с реакцией и изображением. После компиляции веб-пакетом веб-сайт с изображением обслуживается express stati c промежуточным программным обеспечением.

Ожидаемый результат: когда пользователь запрашивает путь / Home, веб-сайт с изображением будет отображаться правильно. Тег img для html будет 

<img class="rounded-lg" src="./Elephant.jpg" style="height: 20vmin; width: 20vmin;">

И изображение для ожидаемого результата: Expected result

Реальный результат:

Изображение отображается некорректно, тег img: 

<img class="rounded-lg" src="Login/Elephant.jpg" style="height: 20vmin; width: 20vmin;">

Real result

И файловая структура папки dist: enter image description here

И код для webpack.config. js: 

const path = require('path');
const fs = require('fs');
const Dotenv = require('dotenv-webpack');
const HtmlWebackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        Login: './src/Login/index.js',
        MainPage: './src/MainPage/index.js',
        Register: './src/Register/index.js',
        Home: './src/Home/index.js'
    },
    output: {
        path: path.join(__dirname, '/dist'),
        filename: '[name]/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_module/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                loader: 'file-loader',
                options: {
                    name(resourcesPath, resourceQuery){
                        console.log(`${resourcesPath.split(path.sep)[7]}`)
                        return `${resourcesPath.split(path.sep)[7]}/[name].[ext]`
                    }
                },
            },
        ]
    },
    plugins: [
        new HtmlWebackPlugin({
            template: './src/index.html',
            filename: 'MainPage/index.html',
            chunks: ['MainPage'],
            title: 'MainPage',
        }),
        new HtmlWebackPlugin({
            template: './src/index.html',
            filename: 'Login/index.html',
            chunks: ['Login'],
            title: 'Login',
        }),
        new HtmlWebackPlugin({
            template: './src/index.html',
            filename: 'Register/index.html',
            chunks: ['Register'],
            title: 'Register',
        }),
        new HtmlWebackPlugin({
            template: './src/index.html',
            filename: 'Home/index.html',
            chunks: ['Home'],
            title: 'Home',
        }),
        new Dotenv()
    ]
        //Each time compile, create a html file with that script, and store it in the /dist /[] folder
}

Ссылка на github: https://github.com/1564851/Qaudcopter-delivery-website-by-MySQL-and-React

...