peerigon / extract-loader

webpack loader to extract HTML and CSS from the bundle
The Unlicense
317 stars 74 forks source link

[help] issues with html-loader interpolation #57

Open zacharyrs opened 5 years ago

zacharyrs commented 5 years ago

Hi,

I'm in the works of developing my own static site generator that relies on pug templates, and markdown content.

I use webpack to bundle the precompiled pug (i.e. html) files, along with css+js, and also to process images etc.

I'm facing an issue using html-interpolation, such that the output bundle has undefined for image sources etc.

For reference, the compiled HTML looks as such:

...
    <script src="${require('../../base/templates/index.sss')}"></script>
...
            <span class="image-wrapper">
                <img class="image-preview" src=${require('../../content/pages/res/mini.jpg').preview} alt="test" title="sss">
                <img class="image-main" onload="this.classList.add('image-loaded')" src=${require('../../content/pages/res/mini.jpg').src} srcset=${require('../../content/pages/res/mini.jpg').srcSet} alt="test" title="sss">
            </span>
...

Webpack does include and process the required images, however the output HTML is as such:

...
    <script src="[object Object]"></script>
...
            <span class="image-wrapper">
                <img class="image-preview" src=undefined alt="test" title="sss">
                <img class="image-main" onload="this.classList.add('image-loaded')" src=undefined srcset=undefined alt="test" title="sss">
            </span>
...

The css interpolated require also appears to have issues, but this may be at my own fault.

The repo may be found here: https://github.com/zacharyrs/ssg.z

Hopefully someone can see where I'm going wrong, or if this is at fault of extract-loader.

Thanks, Zach

zacharyrs commented 5 years ago

Probably related to #54.

jannikkeye commented 4 years ago

@zacharyrs can you verify that the latest changes fixed this issue?

zacharyrs commented 4 years ago

I'm a little busy with uni at the moment, but I'll check it ASAP in the next couple of weeks!