Webpack not exporting images files by src attribute

I’m trying to output all image files through webpack, but webpack is only exporting the images that are referenced by url attribute in css (scss) and is ignoring all images referenced by src attribute.

I found someone who had the same issue on this thread and tried what was suggested in the top rated answer by adding extract-loader and html-loader, but that resulted in the entire build getting a host of errors. Can anyone give me some advice on how to achieve this? Thanks.

My webpack config:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
var path = require('path');

// change these variables to fit your project
const jsPath="./library/src/js";
const scssPath="./library/src/scss";
const outputPath="library/dist";
const localDomain = 'https://example.local';

module.exports = {
  entry: {
    app: {
      import: jsPath + '/app.js',
    },
    styles: {
      import: scssPath + '/styles.scss',
    },
  },
  output: {
    path: path.resolve(__dirname, outputPath),
    filename: '[name].js',
    clean: true,
  },
  devtool: "source-map",
  plugins: [
    // removes the empty `.js` files generated by webpack
    new RemoveEmptyScriptsPlugin(),
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [
      {
        test: /\.s?[c]ss$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"],
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg)$/i,
        type: "asset/resource",
        generator: {
          filename: "./img/[name][ext]",
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/i,
        type: "asset/resource",
        generator: {
          filename: "./font/[name][ext]",
        },
      },
    ]
  },
  optimization: {
      minimizer: [
        "...",
        new ImageMinimizerPlugin({
          minimizer: {
            implementation: ImageMinimizerPlugin.sharpMinify,
            options: {
              encodeOptions: {
                jpeg: {
                  quality: 70,
                },
                webp: {
                  lossless: true,
                },
                png: {
                  quality: 75,
                },
                gif: {},
              },
            },
          },
        }),
      ],
    },
};

Source folder structure

Leave a Comment