Wednesday, 7 June 2017

How to have Webpack update template with new filename?

I've webpack setup so every time file changes, new file with new hash in its name is generated and replaces the original. It keeps browser cache to upto date when cache is set to expire far ahead in future.

This is what I want to happen.

When file main-89sed9ewr.js gets generated, I want webpack to go to listed templates and update the value in src of script tags.

Things I don't want to do:

  1. Have webpack Generate new filenames, then save it into json, every time user visits, Server has to read the json from filesystem and pass it to template. I think it's unnecessary IO operation per request for no reason.
  2. Generate script tags with correct src filename and put them in html file, then in main template, include that html file. Simply I think adding script tag shouldn't be this hard. a) first include in webpack THEN b) include html into template.
  3. Update it manually.

What I want:

something like this

main.handlebars

<html>
 <head>
    ....
    <!-- ### hey_webapck_replace_main_script_file_src_below -->
    <script src="/main.js"></script>
  </head>

Now whenever webpack generates the new tag name, I want it to go the file I've connected to it somehow and update script tag with correct name.



via Muhammad Umer

No comments:

Post a Comment