Regex within a template inline tag

Questions / Help
, ,
1

Hello everyone
I would like to run my react app, which is built with webpack. Everything works fine.
But in the app.html.eex, I need to hardcode to css filename, which contains the contenthash generated by webpack. This contenthash can change and therefore I need to wildcard this to main.*.css.
Is this possible and if yes, how?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Test · Phoenix Framework</title>
    <script defer type="text/javascript" src="<%= Routes.static_path(@conn, "/main.js") %>"></script>
    <link rel="stylesheet" href="<%= Routes.static_path(@conn, "/main.68fc705c4c27d56f9522.css") %>"/>
  </head>
  <body>
  </body>
</html>

Best,
Calypso

2

Are You using your own webpack outside of Phoenix?

This should be managed with mix phx.digest and You shouldn’t need to know the hash.

3

Thanks for the reply!

I’m using a custom webpack.config.ts, which is located in assets folder. Consequently, I configured in my dev.exs

config :app_web, AppWeb.Endpoint,
  http: [port: 4000],
  debug_errors: true,
  code_reloader: true,
  check_origin: false,
  watchers: [
    node: [
      "node_modules/webpack/bin/webpack.js",
      "--mode",
      "development",
      "--watch",
      "--watch-options-stdin",
      "--config",
      "webpack.dev.config.ts",
      cd: Path.expand("../apps/app_web/assets", __DIR__)
    ]
  ]

In the plugins section of the webpack.config.ts we see how the name of the .css is generated. Of course I can just change that to a static filename, that never changes like style.css. Then of course it is easy to load that file in the app.html.eex.

plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: "[name].[contenthash].css"
    }),
  ]

I do not quite get now mix phx.digest comes into play.

4 
$ mix help phx.digest

                                 mix phx.digest                                 

Digests and compresses static files.

    mix phx.digest
    mix phx.digest priv/static -o /www/public

The first argument is the path where the static files are located. The -o
option indicates the path that will be used to save the digested and compressed
files.

If no path is given, it will use priv/static as the input and output path.

The output folder will contain:

  • the original file
  • the file compressed with gzip
  • a file containing the original file name and its digest
  • a compressed file containing the file name and its digest
  • a cache manifest file

Example of generated files:

  • app.js
  • app.js.gz
  • app-eb0a5b9302e8d32828d8a73f137cc8f0.js
  • app-eb0a5b9302e8d32828d8a73f137cc8f0.js.gz
  • cache_manifest.json
1 Like