Webpack 5 как подтягивать изображения из html?

Question

[mgmtx]

Добрый день!

Изучаю Webpack 5 и столкнулся с проблемой как подтягивать картинки из html.

Есть такой тестовый проект (используется плагин HtmlWebpackPlugin):

Файловая система:


webpack.config.dev.js

const path = require('path');
const fs = require('fs');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

function generateHtmlPlugins(templateDir) {
    const templateFiles = fs.readdirSync(path.resolve(__dirname, templateDir));
    return templateFiles.map(item => {
      const parts = item.split('.');
      const name = parts[0];
      const extension = parts[1];
      return new HtmlWebpackPlugin({
        filename: `${name}.html`,
        template: path.resolve(__dirname, `${templateDir}/${name}.${extension}`),
        inject: 'body',
        scriptLoading: 'defer',
        publicPath: '/'
      })
    })
}

const htmlPlugins = generateHtmlPlugins('src/views')

module.exports = {
    mode: 'development',
    entry: path.resolve(__dirname, 'src/js/main.js'),
    output: {        
        publicPath: '/',
        clean: true,
        filename: 'js/[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        assetModuleFilename: 'img/[name][ext]'       
    },
    devtool: 'inline-source-map',
    devServer: {
        publicPath: '/',
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, 'dist'),
        open: true,
        compress: true,
        port: 8080,
    },
    plugins: [new MiniCssExtractPlugin({
        filename: 'css/[name].css'
      })].concat(htmlPlugins),
    module: {
        rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: "css-loader",
                    options: {
                        sourceMap: true,
                    },
                },
                {
                    loader: "sass-loader",
                    options: {
                        sourceMap: true,
                    },
                },
            ],
        },
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: 'asset/resource',
        },
        
        ],
    },
};

index.html

<% if (process.env.NODE_ENV === 'development') { %>
<%= require('html-loader!../top.html').default %>
<% }else {  %>
<% for (var css in htmlWebpackPlugin.files.css) { %>
<link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
<% } %>
<% }  %>

    
    <img src="../img/E75-TS_2.png" alt="">


<% if (process.env.NODE_ENV === 'development') { %>
<%= require('html-loader!../bottom.html').default %>
<% }else {  %>
<% for (var js in htmlWebpackPlugin.files.js) { %>
<script src="<%= htmlWebpackPlugin.files.js[js] %>"></script>
<% } %>
<% }  %>

В общем проект на дев сервере билдится нормально, но картинки не хочет подтягивать. Консоль выдает 404 для картинки.
При этом если добавить картинку в файл bottom.html в таком виде, то она начинает подтягиваться.
<img src="./img/E75-TS_2.png" alt="">

Не понимаю куда копать, помогите пожалуйста

Answer 1

[mgmtx]

Нашел решение, которое работает

<img src="<%=require('../img/E75-TS_2.png')%>" alt="">

Было бы здорово, если бы кто-нибудь объяснил почему так работает и можно ли вообще обойтись без такой конструкции

Answer 2

[vova_mayak]

Более простое решение

{
	test: /\.(html)$/,
	use: ['html-loader']
}