Оптимизируйте и используйте изображения в HTML-шаблонах в Webpack.

Question

вопрос новичка здесь.

Я хотел бы оптимизировать изображения, на которые есть ссылки в моих HTML-шаблонах.

Я использую image-webpack-loader (пытаюсь).Вот мой полный конфиг:

const path = require('path');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const sassLintPlugin = require('sass-lint-webpack');

module.exports = env => {
  return {
    entry: {
      index: ['./client/index.js',],
    },
    output: {
      path: path.resolve(__dirname, 'public', 'static'),
      publicPath: env.prod ? '/mariposa/static/' : '/',
      filename: '[name].js'
    },
    devServer: {
      contentBase: './public'
    },
    module: {
      rules: [
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ]
        },
        {
          test: /\.(gif|png|jpe?g|svg)$/i,
          use: [
            'file-loader',
            {
              loader: 'image-webpack-loader',
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 45,
                },
              },
            },
          ],
        },
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/,
          use: [
            'file-loader'
          ]
        },
      ],
    },
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          cache: true,
          parallel: true,
          sourceMap: false
        }),
        new OptimizeCSSAssetsPlugin({})
      ]
    },
    plugins: [
      new sassLintPlugin({
        configPath: '.sass-lint.yml',
      }),
      new MiniCssExtractPlugin({
        filename: '[name].css',
        chunkFilename: '[id].css',
      })
    ],
    mode: env.prod ? 'production' : 'development'
  }
};

Изображения работают нормально, если я использую их в scss или js, они не работают, если я использую простой простой тег img в html.

Я полагаю, мне нужно как-то сделать веб-пакет "осведомленным" о моих HTML-шаблонах?