webpack alias does not work with src="something"

[aep]

Webpack version:

    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"

HTML-Loader version:

    "html-loader": "^0.5.5",

Please tell us about your environment:

Linux stark 4.18.9-arch1-1-ARCH #1 SMP PREEMPT Wed Sep 19 21:19:17 UTC 2018 x86_64 GNU/Linux

Current behavior:

<img src="Dashkit/foo.jpg">

  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json', 'scss'],
    alias: {
      'vue$':     'vue/dist/vue.esm.js',
      'Dashkit':  path.join(__dirname, './Dashkit/src/'),
    },
  },

Module not found: Error: Can't resolve './Dashkit/foo.jpg' in '.../src/components'

Expected/desired behavior:

alias should be applied before resolving

[mistic100]

I think you need to prefix the src with "~", see vuejs/vue-loader#193
It is similiar to how dependencies (S)CSS can be imported.

[aep]

nope. '~/something' will become '/something' without the alias being applied

[mistic100]

Strange, it works for me

resolve: {
            alias: {
                '@app': path.join(config.dir, './app')
            }
}

<img src="~@app/images/logo.png">

[aep]

i'm loading the html like so.

import template from "./device_details.html";
console.log(template);

module: {
   rules: [
       {
         test: /\.html$/,
         use: [
             'html-loader',
         ]
       },
   ]
}

[MitchTalmadge]

I can't get this to work in Angular. I found documentation about it in the vue-loader but no code to support the behavior, so I'm not sure how they implemented it. I of course don't use vue-loader since I am using Angular, but it makes me wonder if html-loader has this functionality but it's not documented? (Or I can't find it.)

https://github.com/vuejs/vue-loader/blob/bcee5b9127800070fe5797fe4be466641b88acc8/docs/guide/asset-url.md#transform-rules

[alexander-akait]

Example above #185 (comment)

[oodzchen]

I still meet this problem in webpack5, my alias config is

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

And i use ejs-template-loader with html-loader to handle the html code. The html code is

<img src="@/images/logo.svg">

which cause the error

Module not found: Error: Can't resolve './@/images/logo.svg' in ...

If I change the image path to ../image/logo.png, it works fine. But the alias is more helpful for me to avoid the path converting problem, how can i make it work?

[AlexeyKosov]

<img src="@/images/logo.svg">

<img src="~@/images/logo.svg">