Почему webpack 5 использует неправильные src изображений?

Question

[TuMko]

Делаю сборку webpack 5 со следующей структурой:

-dist
  -assets
    -img
  index.html
-src
  -assets
    -img
  -js
  -styles
  index.html
webpack.common
webpack.dev
webpack.prod

В index.html прописана картинка с путем assets/img/1.png, но она не отображается из-за неверного пути. Если картинке прописать путь src/assets/img/1.png, тогда она появится, но при продакшн сборке не будет отображаться эта картинка из-за неверного пути к ней (в папке dist не предусмотрена папка src, там сразу будет папка assets, а в ней уже папка img с картинкой). Т.е. получается index.html из папки src берет пути к файлам, как будто сам он находится в корне проекта. Как это исправить, чтобы не выносить папку assets из src и не создавать папку src в dist?

webpack.common:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const dirNode = 'node_modules';
const dirJs = path.join(__dirname, 'src/js');
const dirStyles = path.join(__dirname, 'src/styles');
const dirAssets = path.join(__dirname, 'src/assets');

/**
 * Webpack Configuration
 */
module.exports = env => {
    // Is the current build a development build
    const IS_DEV = !!env.dev;

    return {
       
        entry: {
            main: path.join(dirJs, 'index')
        },

        resolve: {
            extensions: ['.js'],
            modules: [
                dirNode,
                dirJs,
                dirStyles,
                dirAssets
            ]
        },

        plugins: [
            new webpack.DefinePlugin({ IS_DEV }),

            new HtmlWebpackPlugin({
                template: 'src/index.html'
            })
        ],

        module: {
            rules: [
                // BABEL
                {
                    test: /\.m?js$/,
                    exclude: /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            compact: true
                        }
                    }
                },

                // STYLES
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: IS_DEV
                            }
                        },
                    ]
                },

                // CSS / SASS
                {
                    test: /\.scss/,
                    use: [
                        'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                sourceMap: IS_DEV
                            }
                        },
                        {
                            loader: 'sass-loader',
                            options: {
                                sourceMap: IS_DEV,
                                sassOptions: {
                                    includePaths: [dirAssets]
                                }
                            }
                        }
                    ]
                },

                // IMAGES
                {
                    test: /\.(png|jpe?g|gif)$/i,
                    use: {
                        loader: 'file-loader',
                        options: {
                            name: '[path][name].[ext]'
                        }
                    }
                }
            ]
        },

        optimization: {
            runtimeChunk: 'single'
        }
    };
};

webpack.dev:

const { merge } = require('webpack-merge');
const common = require('./webpack.common');

module.exports = env => {
    return merge(common(env), {
        mode: 'development',
        // Use eval-cheap-source-map for accurate line numbers, eval has best build performance
        devtool: 'eval',
        output: {
            pathinfo: true,
            publicPath: '/',
            filename: '[name].bundle.js'
        },
        devServer: {
            open: true,
            port: 3000,
        }
    });
};

webpack.prod:

const path = require('path');
const { merge } = require('webpack-merge');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const common = require('./webpack.common');

module.exports = env => {
    return merge(common(env), {
        mode: 'production',
        // IMPORTANT: Configure server to disallow access to source maps from public!
        devtool: 'source-map',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].bundle.js'
        },
        plugins: [
            new CleanWebpackPlugin(),

            new CopyPlugin({
                patterns: [
                    { from: path.join(__dirname, 'src/assets'), to: 'assets' }
                ]
            })
        ]
    });
};

Comments

[Михаил]

ставить путь от корня

[TuMko]

Михаил, тогда в продакш версии (папка dist ) не будут отображаться изображения

[Михаил]

TuMko,
https://htmlacademy.ru/blog/boost/frontend/links

[TuMko]

Михаил, не нашел по вашей ссылке решения моего вопроса: почему в src/index.html пути к изображениям необходимо прописывать относительно корня проекта, а не самого index.html и как это исправить.

[Михаил]

TuMko,
1. Либо путь от корня (до файла на который будет ссылаться БРАУЗЕР) /assets/img/1.png
2. Либо require('path/image.jpg'), тогда картинка пройдёт через webpack, хэш в имени, обработки, оптимизации и тд

[TuMko]

Михаил, в webpack 4 это работало иначе, index.html все-таки понимал файлы относительно себя, а не относительно корня проекта. В webpack 5 что-то изменилось в этом плане?

[Saintcoder]

TuMko Есть вариант, который мне помог

Источник

<img src="<%=require('./src/assets/logo.png')%>">

module: {
        rules: [
           {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
                ...
            },