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:
- Continue using the official Webpack template from Vue and store your static assets in
/static
, then references them manually inindex.html
using paths which refer to your deployment – not to your development environment - 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
- 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.