优化和使用Webpack的html模板中的图像

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中使用图像，它们可以正常工作，如果我在html中使用简单的简单img标签，它们将无法正常工作。

我想我必须以某种方式使webpack意识到我的html模板？