Webpack 5 Asset modules not creating images to dist folder when using handlebars-loader. How do i get it to output the images?

1

This is my config file, I have tried with html-loader it works fine for .html files but i’m now trying to learn and use handlebarjs its not working the same

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
	plugins: [
    new HtmlWebpackPlugin({
      title: 'Output Management',
			template: './src/index.hbs'
    }),
  ],
	devtool: 'inline-source-map',
	devServer: {
    static: './dist',
		hot: true,
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
		publicPath:'/dist/',
		clean:true,
  },
	mode: 'development',
	module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
			{
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
				generator: {
					filename: 'assets/img/[hash][ext][query]'
				}
      },
			{
        test: /\.hbs$/i,
        use: ['handlebars-loader'],
      },			

    ],
  },
};

my .hbs template

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>{{htmlWebpackPlugin.options.title}}</title>
</head>
<body>
<img src="./img/logo.svg" alt="logo">
<h1>hello world</h1>
</body>
</html>
2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.