Can't resolve image in seperate folder

AidanWelch commented 11 months ago

Hello,

   html-bundler-webpack-plugin  Can't resolve src\static\images\Logo.png in the file src\views\index.html

It's called in this eta template that:

<header>
    <img src="../static/images/Logo.png" />
</header>

That is then referenced in this view:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Test</title>
        <%~ include('./src/components/head.eta') %>
    </head>
    <body>
        <%~ include('./src/components/header.eta') %>
    </body>
</html>

And, the file does exist.

Here is the webpack config

'use strict';
const path = require( 'path' );
const HtmlBundlerPlugin = require( 'html-bundler-webpack-plugin' );

module.exports = ( env, argv ) => [
    {
        devtool: ( argv.mode === 'development' ) ? 'inline-source-map' : false,
        output: {
            path: path.resolve( __dirname, 'build' ),
            clean: true
        },
        plugins: [
            new HtmlBundlerPlugin({
                entry: './src/views',
                hotUpdate: 'auto', // doesn't seem to work
                minify: 'auto',
                css: { inline: true }
            })
        ],
        module: {
            rules: [
                {
                    test: /\.(css|sass|scss)$/,
                    use: [ 'css-loader', 'sass-loader' ]
                }
            ]
        },
        devServer: {
            hot: false,
            port: 8000,
            allowedHosts: 'auto',
            static: path.resolve( __dirname, 'build' ),
            watchFiles: 'src/**/*',
            client: { progress: true },
            devMiddleware: { writeToDisk: true }
        }
    }
];

Thank you!

webdiscus commented 11 months ago

Hello @AidanWelch,

can you please create a small repo with reproducible issue. Thank you!

AidanWelch commented 11 months ago

@webdiscus

Of course, here it is

webdiscus commented 11 months ago

@AidanWelch

to resolve images in HTML you must add the rule for images:

'use strict';
const path = require( 'path' );
const HtmlBundlerPlugin = require( 'html-bundler-webpack-plugin' );

module.exports = ( env, argv ) => [
    {
        devtool: ( argv.mode === 'development' ) ? 'inline-source-map' : false,
        output: {
            path: path.resolve( __dirname, 'build' ),
            clean: true
        },
        plugins: [
            new HtmlBundlerPlugin({
                entry: './src/views',
                hotUpdate: true, // <= works fine, use it only if you don't have a script
                minify: 'auto',
                css: { inline: true }
            })
        ],
        module: {
            rules: [
                {
                    test: /\.(css|sass|scss)$/,
                    use: [ 'css-loader', 'sass-loader' ]
                },
                                // => add the rule for images
                {
                    test: /\.(ico|png|jp?g|webp|svg)$/,
                    type: 'asset/resource',
                    generator: {
                        filename: 'img/[name].[hash:8][ext][query]',
                    },
                },
            ],
        },
                // enable live reload
        devServer: {
            hot: true,
            static: path.join(__dirname, 'build'),
            watchFiles: {
                paths: ['src/**/*.*'],
                options: {
                    usePolling: true, // <= use it instead of writeToDisk
                },
            },
        },
    }
];

The hotUpdate can be only true or false. See please the documentation for the hotupdate option.

AidanWelch commented 11 months ago

@webdiscus

to resolve images in HTML you must add the rule for images:

Perfect thank you, I had interpreted the docs to have been saying including the loader was just for additional configuration, as it wasn't shown in the basic example.

As for the issue with hotUpdate, I had tested it with true, I just hadn't looked at it too much. It was just that my devServer config had hot set to false.

webdiscus / html-bundler-webpack-plugin

Can't resolve image in seperate folder #47