[Vuejs]-Vue + html-webpack-plugin not load index.html generated

by

1👍

✅

The HtmlWebpackPlugin uses the globally configured loaders to process the template when not defined differently. In your case this results in the vue-html-loader handling your entry-template.html. Probably this is the reason, your template html is not processed correctly. Please have a look at the docs for the HtmlWebpackPlugin about the way the loaders are handled.

Does specifying the loader directly work in your case?

plugins: [
  new HtmlWebpackPlugin({
    template: '!!html!entry-template.html',
    environment: process.env.NODE_ENV
  })
],

For details on the syntax, please see the docs about loaders order and overwriting them.

UPDATE:

The vue-html-loader is an extension of the original html-loader and doesn’t seem to cause the problem here. From your webpack output, I saw that you are using the publicPath property which controls the base path to be used when serving your content. This is not the path of your files on your disk but the path in the url where your content should be served from. So your setup already works when you are visiting localhost:8080/dist. Omitting the publicPath property makes it serve from the root path.

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js'
  },
  ...

Also, when using the router, you should add a router-outlet to your template such that the content of your templates (e.g. login) can be included in the main template (which I guess is app). 

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>
👤Andreas Jägle

1👍

After reading the answers here and about two days of research, on the same problem, it turns out that this issue is related specifically to the fact that the webpack-development-server does not write files to your local file system and instead writes its files to MEMORY ONLY.

You SHOULD be able to properly generate files wth Html-Webpack-Plugin when you run the default webpack build command (NOT the WDS / Webpack-Development-Server) with: 

webpack

Keep in mind you must be in the project directory. Alternately for those using vue.js Webpack-simple project (https://github.com/vuejs-templates/webpack-simple/tree/master/template) you can use the npm scripts that come with the Vue.js sample (located inside of your package.json) via: 

npm run build

If all goes well you will notice that the files ARE written to the directory as you would have thought they should be, but were not, when using Webpack-Development-Server (again this does not work because WDS writes to memory and not the local file system).

You can see this StackOverflow question also runs into the issue when using the base Vue.js Webpack project:
html-webpack-plugin not inject js file into index.html when using webpack-dev-server

I stumbled onto this answer when reading the above question since the user mentions:

“If I run webpack or npm run build, the js file is injected successfully. Can html-webpack-plugin also inject js file into index.html when I’m in localhost?”

👤Necevil

Leave a comment