webpack - webpack: HTML タグでエイリアスが機能しない

Question

以下のエイリアスが HTML タグや JavaScript で機能しない理由はありますか?

私のwebpack構成ファイルでは：

  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src/')
    }
  },
 ...
 ...
 ...

 {
    test: /\.(png|svg|jpg|gif|ico)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          outputPath: 'images',
          esModule: false,
          name: '../assets/images/[name].[ext]'
        },
      },
    ]
 },
 {
   test: /\.(html)$/,
   use: ['html-loader']
 }

私のHTMLファイル（.vue）では：

// .vue
// Does not work
<template>
  <p><img src="~/assets/images/sample.jpg"></p>
</template>

// Ok
<script>
import Image from '~/assets/images/sample.jpg'
</script>

webpack 構成に何か不足していますか?