Почему изображения ссылаются на старый путь?

Question

[DonorOfLove]

Есть папка с изображениями 1.jpg, 2.jpg и т.д., есть globals.json

"stock": [
    {
      "image": "1.jpg"
    },{
      "image": "2.jpg"
    }]
  ],

,
на основе которого я с помощью ejs описываю template.html

<div>
   <% stock.forEach(function(item,index){ %>
               <img class="truck_img" src="../src/assets/img/<%= item.image %>" alt="#">
                <% }) %>
</div>

webpack выглядит так:

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const globals = require('./globals.js')

module.exports = {
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        publicPath: "/Test/",
    },
    module: {
        rules: [
            {
                test: /\.js/,
                exclude: /(node_modules|bower_components)/
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
        ]
    },
        plugins: [
        new HtmlWebpackPlugin({
            title: globals.page_meta.title,
            metaKeywords:globals.page_meta.meta_keywords,
            metaDescription:globals.page_meta.meta_description,
            template: path.resolve(__dirname, './src/template.html'),
            templateParameters: globals,
            filename: 'index.html',
        }),
                new MiniCssExtractPlugin(),
     ],
}

Через импорт в index.js добавил изображения в dist, но html не ссылается на них, а ссылается на старый путь

Answer 1

[Влад Палаев]

Попробуйте установить html-loader. Помимо того что он может работать c импортами, он еще так же парсит нашу html страницу на img и сам после сборки копирует файлы из тега в dist и автоматом вставляет новые пути с [hash]. Не забудь в output указать куда ложить assset module

output: {
  assetModuleFilename: 'assets/[name].[hash].[ext]',
}
{
    test: /\.html$/,
    use: 'html-loader', 
}