How can add dynamic options in template through HtmlWebpackPlugin?

Question

I am looking for to have a script tag with dynamic path injected by HtmlWebpackPlugin. Firstly, my template file has not html format and defined as follows ( it is a index.ftl file):

<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=true displayInfo=realm.password && realm.registrationAllowed && !registrationDisabled??; section>
  <#if section = "styles">
   
    <link rel="stylesheet" href="${url.resourcesPath}/css/login.css" /> 
</#if>
  

     <#if section = "scripts">
          <script typo="module" src="${url.resourcesPath}/js/login.js"></script>  
    </#if>

</@layout.registrationLayout>

I defined my webpack.config as follows:

const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {

...

plugins :[  
          new HtmlWebpackPlugin({
            inject: false,
            template: './src/index.ftl',
            filename: `index.ftl`,
            minify: false
          })
      ),]
}

When i run the build command, an index.ftl with proper name is generated. and the included script tag has static .js name (/login.js) in its src attribute. I expect that in my build file(index.ftl) the following script tag will be generated: <script typo="module" src="${url.resourcesPath}/js/dynamic.js"></script> How can do it?