Почему alias webpack 5 не работает в html?

Question

[Evtera]

Здравствуйте. Есть конфиг вебпака. Вот кусок

entry: {
    _global: ["./js/_global/_global.js"],
    index: ["./js/index/#index.js"],
    about: ["./js/about/#about.js"],
  },
  output: {
    filename: "./js/[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },
  resolve: {
    alias: {
      "@js": path.resolve(__dirname, "src/js"),
      "@scss": path.resolve(__dirname, "src/scss"),
      "@": path.resolve(__dirname, "src"),
      "@dist": path.resolve(__dirname, "."),
    },
  },

При попытке вставить картинку, из-за вложенности необходимо писать такой вот путь

<img src="../../assets/images/_global/icons/task__volume.png" alt="eqeqe" />

так как ~@ не работает.

<img src="~@/assets/images/_global/icons/task__volume.png" alt="eqeqe" />

В чем может быть проблема?

Answer 1

[NarkoMan01]

Если не ошибаюсь они не работают в html. Они работает только для js

Comments

[Evtera]

работают. Пол дня ковырялся на стаковерфлоу и здесь. Как пример
Почему не работает alias в html без ~?

[NarkoMan01]

суть псевдонимов в импорте, а импорты как мы знаем доступны только для файлов типа js. Webpack видит эти импорты и их алиас, и соответственно при сборке просто меняет алиасы на нужный нам путь. В html нет импортов,и вебпак не знает что это алиас

[NarkoMan01]

Если уж очень хочется использовать алиас то только через js...

import task__volume from ~@/assets/images/_global/icons/task__volume.png;
const img = document.createElement('img');
img.setAttribute('src',task__volumefrom);
document.querySelector('.some_class').append(img)