search

dc7290 / template-ejs-loader

ejs-loader with webpack5 support. Chain it to html-loader and use it with html-webpack-plugin.
MIT License
24 stars 3 forks source link

webpack-dev-server seems to ignore the change of ejs partial template which is "nested" in another ejs partial template. #12

Closed mizok closed 2 years ago

mizok commented 2 years ago

What happened? :

I found this problem yesterday, I have an index.ejs , a footer.ejs, and a svg-sprite.ejs just like below.

index.ejs:

<!DOCTYPE html>
<html lang="en">

<%- include('./src/template/head.ejs',{title:'index'})%>

<body>
  <div class="site">
    <div class="site__header-wrapper">
       <header class="header"></header>
    </div>
    <div class="site__body">

    </div>
    <div class="site__footer-wrapper">
      <%- include('./src/template/footer.ejs') %>
    </div>
  </div>
</body>

</html>

footer.ejs:

<footer class="footer"></footer>
<%- include('./svg-sprite.ejs')%>

svg-sprite.ejs:

<svg width="0" height="0" class="svg-sprites" style="display:none">
  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38 38" id="checkboard">
    <path fill-rule="evenodd" clip-rule="evenodd"
      d="M15.8334 4.9165C14.1765 4.9165 12.8334 6.25965 12.8334 7.9165H11.875C9.65131 7.9165 8.53944 7.9165 7.74073 8.45018C7.39497 8.68122 7.09809 8.9781 6.86705 9.32386C6.33337 10.1226 6.33337 11.2344 6.33337 13.4582V28.4998C6.33337 31.4854 6.33337 32.9782 7.26087 33.9057C8.18836 34.8332 9.68114 34.8332 12.6667 34.8332H25.3334C28.3189 34.8332 29.8117 34.8332 30.7392 33.9057C31.6667 32.9782 31.6667 31.4854 31.6667 28.4998V13.4582C31.6667 11.2344 31.6667 10.1226 31.133 9.32386C30.902 8.9781 30.6051 8.68122 30.2593 8.45018C29.4606 7.9165 28.3488 7.9165 26.125 7.9165H25.1667C25.1667 6.25965 23.8236 4.9165 22.1667 4.9165H15.8334ZM16.4167 7.9165C16.4167 7.36422 16.8644 6.9165 17.4167 6.9165H20.5834C21.1357 6.9165 21.5834 7.36422 21.5834 7.9165C21.5834 8.46879 21.1357 8.9165 20.5834 8.9165H17.4167C16.8644 8.9165 16.4167 8.46879 16.4167 7.9165ZM14.25 17.9998C13.6978 17.9998 13.25 18.4476 13.25 18.9998C13.25 19.5521 13.6978 19.9998 14.25 19.9998H23.75C24.3023 19.9998 24.75 19.5521 24.75 18.9998C24.75 18.4476 24.3023 17.9998 23.75 17.9998H14.25ZM14.25 24.3332C13.6978 24.3332 13.25 24.7809 13.25 25.3332C13.25 25.8855 13.6978 26.3332 14.25 26.3332H20.5834C21.1357 26.3332 21.5834 25.8855 21.5834 25.3332C21.5834 24.7809 21.1357 24.3332 20.5834 24.3332H14.25Z"
      fill="currentColor" />
  </symbol>
</svg>

You can see that svg-sprite.ejs is actually "nested" in footer.ejs, but not in index.ejs(Here index.ejs is the template I use as an entry template for htmlWebpackPlugin).

The problem is that when I saved the change in svg-sprite.ejs, webpack-dev-server just didn't get that change.

BTW It seemed NOT a problem about hot module reload(HMR), because even I turned off the hot option in devServer, this still happened, and I also set the watchFiles option for those partial template , but it was still not working.

Expected behavior:

Just need webpack-dev-server to watch the change of those nested partial template.

Any idea about how to fix this ? If you need a reproducible repository for testing, feel free to ask for it :)

PS. Actually I know a little bit Japanese, I guess it's ok to read comments written in Japanese.

mizok commented 2 years ago

@dc7290

I found this problem is reproducible in your another repository, too.

https://github.com/dc7290/ejs-wepack-template

Just take a try : include a new ejs file(let's call it example.ejs) inside /layout/header.ejs, then npm run dev, then try to change/add something in example.ejs, you will find that webpack-dev-server just ignore that change.