How to resolve paths in custom attributes using html-loader with this excellent loader?

[geekox86]

Hi,

I have a Vue component template in pug with a prop called "pictureUrl" that I want to use with this value "~root/assets/icons/search-grey.png". However, I want Webpack to resolve this path to its base64 dataurl content using html-loader, url-loader, or any other loader.

How can I achieve this while using your loader?

[geekox86]

btw, this is what I get when trying to use html-loader with this loader:

text "module.exports = "\n" outside root element will be ignored

[geekox86]

import * as path from 'path'
import { Configuration, NamedModulesPlugin, HotModuleReplacementPlugin } from 'webpack'
import { VueLoaderPlugin } from 'vue-loader'
import * as WebpackShellPlugin from 'webpack-shell-plugin'
import * as HtmlWebpackPlugin from 'html-webpack-plugin'
import * as HtmlWebpackInlineSourcePlugin from 'html-webpack-inline-source-plugin'

const config: Configuration = {
  mode: 'development',
  context: path.resolve(__dirname),
  entry: path.resolve(__dirname, 'index.ts'),
  output: {
    path: path.resolve(__dirname, 'bundles'),
    filename: 'index.js'
  },
  resolve: {
    alias: {
      root: path.resolve(__dirname),
      '~root': path.resolve(__dirname)
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
      {
        test: /\.pug$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              attrs: ['customComponent:customUrl']
            }
          },
          'pug-plain-loader'
        ]
      },
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              alias: {
                root: path.resolve(__dirname)
              }
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(jpg|jpeg|png|gif|svg|ttf|woff|woff2|eot)$/,
        loader: 'url-loader',
        options: {
          limit: 1048576
        }
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new NamedModulesPlugin(),
    new WebpackShellPlugin({
      onBuildStart: 'rm -rf bundles/*',
      onBuildEnd: 'rm -f bundles/index.js'
    }),
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.html'),
      inlineSource: /\.js$/
    }),
    new HtmlWebpackInlineSourcePlugin(),
    new HotModuleReplacementPlugin()
  ],
  devtool: 'source-map',
  devServer: {
    port: 8080,
    contentBase: path.resolve(__dirname, "bundles"),
    compress: true,
    hot: true
  }
};

export default config;