Is there something similar to the webpack html plugin for ClojureScript?

clojurescript

#1

For Javascript projects with webpack, I’m used to this plugin: https://github.com/jantimon/html-webpack-plugin
Instead of writing my own static index.html file, the plugin generates an index.html file that includes the compiled bundles (JS, CSS, etc…). For example, for development it will create an html file with a <script src="bundle.js"></script> tag, while for production it will generate something like <script src="bundle.HASH.js"></script>
Is there something similar for ClojureScript? I’m using figwheel-main, but looks like there isn’t anything similar out of the box


#2

I’m using my own script for generating HTML. A script of adding virtual DOMs and it handles src property in my cljs code.


#3

Hello!

Shadow-CLJS seems to support it. Ctrl+f for module-hash-names.

As I understand it, Figwheel is primarily a development tool. Shadow-CLJS provides help all the way to production. That is, shadow can hot-load your code in development and compile it for production. If you would like to use Figwheel for development and have module hashing for production, I think you’d have to look into the CLJS build API, and make a build script that computes hashes, renames files and generates links in index.html accordingly. Which isn’t exactly what you were asking for.

Hope that helps!


#4

Hi!

From what I understand this was recently added to ClojureScript itself as a :fingerprint build option:

I’ve used it successfully but getting functionality equivalent to html-webpack-plugin involved writing a custom script which looks something like:

(ns build.add-hash
 (:gen-class))

(def index-path "./public/index.html")
(def two-hundred-path "./public/200.html")
(def manifest-path "./public/js/manifest.edn")
(def app-js-path "public/js/app.js")
(def app-js-file-to-replace "js/app.js")
(def replacement-regex
  (java.util.regex.Pattern/compile app-js-file-to-replace))

(defn -main
  "Add hash from the latest package bundle to the html files"
  [& args]
  (let [manifest (read-string (slurp manifest-path))
        hashed-filename (subs (get manifest app-js-path) 7)

        index-file (slurp index-path)
        adjusted-index (clojure.string/replace index-file
                                               replacement-regex
                                               hashed-filename)]
    (do
      (spit index-path adjusted-index)
(spit two-hundred-path adjusted-index))))