Does Webpack process index.html for Vue apps? Code Answer

In my index.html, I have these inside of the head tag:

<link rel="apple-touch-icon" sizes="60x60" href="./assets/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/icons/favicon-16x16.png">
<link rel="manifest" href="./assets/manifest.json">

However, whenever index.html is loaded, those assets just load as index.html again and not their images. Does Webpack not process index.html? Is there some other way to get processed content into the head tag? Or do I have to put these in the static directory?

Answer

You have to put these in the static folder – the reason is that the only treatment that index.html receives from Webpack (as configured in the official Vue template) is to inject the resulting JS and CSS files. It simply ignores your existing references to assets. So you have several choices:

1. Continue using the official Webpack template from Vue and store your static assets in /static, then references them manually in index.html using paths which refer to your deployment – not to your development environment
2. Use your assets in one or more Vue single-file components – then their relative URLs will be processed by Vue-loader and properly included in your bundle. In this case you do not have to manually include them in index.html
3. Use the html-webpack-include-assets-plugin for the html-webpack-plugin – the latter is already used by the official Vue template to inject JS and CSS into index.html You will have to modify your /build/webpack.prod.conf.js and configure the above plugin – look at its examples on GitHub

And to answer your question – the only way to get hash versioning and compression is to refer to your assets from a Vue component using relative path so that they are properly treated by Vue-loader.