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

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Does Webpack process index.html for Vue apps? without wasting too much if your time.

The question is published on by Tutorial Guruji team.

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.

We are here to answer your question about Does Webpack process index.html for Vue apps? - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji