How to use htmlhint-loader with vuejs

I am trying to setup html linting with my vuejs app, but I am not sure how to configure this correctly with my webpack config. I am currently trying with htmlhint-loader. I installed it using this command:

npm install htmlhint-loader --save

And added following code in my webpack.base.config:

module: {
  preLoaders: [
    {
      test: /\.vue$/,
      loader: 'eslint',    // I'm already using eslint which works as expected
      include: projectRoot,
      exclude: /node_modules/
    },
    {
      test: /\(vue|html)$/,
      loader: 'htmlhint',
      include: projectRoot,
      exclude: /node_modules/
    },
    ...
    ...

But this does not work, Let me know if anything else is also needed to make it work.

When I use this regex:

test: /(vue|html)$/,

I get following error:

ERROR in ./~/html-webpack-plugin/lib/loader.js!./index.html Module parse failed: >/Users/saurabh.mimani/work/codes/j/vue/node_modules/html-webpack-plugin/lib/loader.js!/Users/saurabh.mimani/work/codes/j/vue/node_modules/htmlhint-loader/index.js!/Users/saurabh.mimani/work/codes/j/vue/index.html Unexpected token (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (1:0) at Parser.pp$4.raise (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp.unexpected (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10) at Parser.pp$3.parseExprAtom (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12) at Parser.pp$3.parseExprSubscripts (/Users/saurabh.mimani/work/codes/j/vue/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)