Vue + html-webpack-plugin not load index.html generated

Question

I try to use HtmlWebPackPlugin to generate my index.html so...

I init a new project vue init webpack-simple#1.0 vue-html-webpack
Install npm i -D html-webpack-plugin
Rename index.html to entry-template.html
Configure webpack.config.js ..

I add ..

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

But web I start the app npm run dev, the 404 is returned (I suppose is not finding the index.html)

My entry-template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GitSkills</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

Full source here

Result -> https://vue-html-webpack-ogqlguavxx.now.sh/

Question

How can I use HtmlWebpackPlugin with Vue 1.0?

Can you provide a link to clone the repo?

jshbrntt
– jshbrntt

2016-09-04 18:27:04 +00:00
Commented Sep 4, 2016 at 18:27 — jshbrntt
– jshbrntt, Commented Sep 4, 2016 at 18:27
Yep.. github.com/Ridermansb/vue-html-plugin-problem

ridermansb
– ridermansb

2016-09-06 14:36:32 +00:00
Commented Sep 6, 2016 at 14:36 — ridermansb
– ridermansb, Commented Sep 6, 2016 at 14:36

Andreas Jägle · Accepted Answer · 2016-09-05 21:42:17Z

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>

edited Sep 5, 2016 at 21:42

answered Sep 4, 2016 at 19:47

Andreas Jägle

12.4k3 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ridermansb Over a year ago

I have loader for HTML { test: /\.html$/, loader: 'vue-html' } , I tried to change HtmlWebpackPlugin configuratiion to to template: '!!html!entry-template.html', but the same error occurs

Andreas Jägle Over a year ago

Did you install the loader with npm? Could you please add the console output of running webpack to your question?

ridermansb Over a year ago

You can see the project here.. github.com/Ridermansb/vue-html-plugin-problem

Community · Accepted Answer · 2017-05-23 11:53:40Z

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?"

Collectives™ on Stack Overflow

Vue + html-webpack-plugin not load index.html generated

Question

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related