Why doesn't alias work in html without ~?

Question

JavaScript

Hello!

Alias ​​does not work in html without ~, and if you put it, then webstorm does not understand it. Alias ​​work fine in js, ts without ~ and webstorm understands everything, but not in html.

Here is the whole source code:

tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "@components/*": [
        "components/*"
      ],
      "@assets/*": [
        "static/assets/*"
      ]
    }
  }
}

jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./src/",
    "paths": {
      "@components/*": [
        "components/*"
      ],
      "@assets/*": [
        "static/assets/*"
      ]
    }
  }
}

webpack.config.js

resolve: {
  modules: [
    path.resolve(__dirname, 'node_modules')
  ],
  alias: {
    '@components': path.resolve(__dirname, './src/components'),
    '@assets': path.resolve(__dirname, './src/static/assets')
  },
  extensions: ['.ts', '.js']
},

index.html:

<div class="header">
    <div class="header__logo">
        <img src="@assets/images/1.jpg" alt=""> // Не работает
        <img src="[email protected]/images/1.jpg" alt=""> // Работает
    </div>
</div>

webstorm:



In js without ~ everything works fine:

import { header } from '@components/header/header'

export function footer () {
  header()
}

What to do?) I would be happy to always put ~, but without autocomplete it's death ((