webpack-dev-server with html-webpack-plugin

README.md

$ npm install
$ ./node_modules/.bin/webpack-dev-server
$ open http://localhost:8080/webpack-dev-server/

Notes:

• Note the trailing slash on the URL is significant. Without it webpack-dev-server shows a file listing page.
• You need 1.0.11 or later of webpack-dev-middleware for this URL to work. With earlier versions you need to specify the full URL like this: http://localhost:8080/webpack-dev-server/index.html.
• To get a non-autoreloading version of the page use http://localhost:8080/index.html.

index.js

document.body.innerHTML = "<p>Here 'tis</p>";

package.json

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "webpack": "^1.4.10"
  },
  "devDependencies": {
    "html-webpack-plugin": "^1.1.0",
    "webpack": "^1.4.10",
    "webpack-dev-server": "^1.6.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Charles Blaxland <charles.blaxland@gmail.com> (https://github.com/ampedandwired)",
  "license": "MIT"
}

webpack.config.js

HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
}

There is a problem in my development.

webpack-dev-server serves files from publicPath of output of webpack configure. And html-webpack-plugin does not provide publicPath option, so server cannot find the html generated by the plugin on webpack-dev-server mode.

There is the console info of my webpack-dev-server running:
(js file has the publicPath, but html file does not. http://127.0.0.1:9999/dist/html/frontDesk.html cannot be found.)

http://127.0.0.1:9999/
webpack result is served from /dist/
content is served from ./
Hash: 579c06bbc3b1897ddc9e
Version: webpack 1.14.0
Asset Size Chunks Chunk Names
js/frontDesk.579c06bbc3b1897ddc9e.bundle.js 6.08 MB 0 [emitted] frontDesk
Users/jacobway/Projects/Front_End_Web/iKTV/dist/html/frontDesk.html 764 bytes [emitted]

This doesn't work for me on webpack 2. It's lik @JacobWay says, HtmlWebpackPlugin doesn't create the html to be seen by dev server.

I also meet this problem!

+1 to this problem

+1, but how to resolve this problem?

+1

Hey guys, i find a solution, you can use html-webpack-harddisk-plugin

+1

+1

+1

@JacobWay @dietergeerts and others - it seems like it can be fixed by the template option of the html-webpack-plugin. Like example below.

...
new HtmlWebpackPlugin({
  template: path.join(__dirname, 'src/index.ejs'), // path to your index.ejs
}),
...

use like this webpack --config webpack.config.js && webpack-dev-server --hot --open is more simple.

+1, I try the template option, But in vain

When using webpack-dev-server the html-webpack-plugin doesn't write to disk, but as yvanwangl pointed out you can use the html-webpack-harddisk-plugin to force the html to be written to disk, which will then be served by the dev server plugin:

plugins:[
  new HtmlWebpackPlugin({
    alwaysWriteToDisk: true
  }),
  new HtmlWebpackHarddiskPlugin(),
  ...

I got it working without the HtmlWebpackHarddiskPlugin, check this comment, maybe it could help. I was confused with this as well

I am able to use an .ejs template file with WebpackDevServer. The .ejs template file sits at /src/index.ejs and the webpack output is sent to /public.

Here are my relevant package versions.

  "devDependencies": {
    "html-webpack-plugin": "^2.22.0",
    "react-hot-loader": "^3.1.3",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.4.5"
  }

Below is my webpack config file. Reading Facebook's create-react-app dev config file for webpack will provide a very clear explanation of all the important config properties. The important thing to keep in mind is that WebpackDevServer serves the build files from memory.

• https://github.com/facebookincubator/create-react-app/blob/19e0bb1881e24fb1ee3fe421413d4d87e67f68dd/packages/react-scripts/config/webpackDevServer.config.js

const { resolve } = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  devtool: "eval-source-map",
  entry: [
    "react-hot-loader/patch",
    resolve("src", "index.js")
  ],
  output: {
    filename: "js/bundle.js",
    path: resolve("public"),
    publicPath: "/"
  },
  resolve: {
    extensions: [".js", "jsx"]
  },
  module: { /* your rules here */ },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: "My App Name",
      filename: resolve("public", "index.html"),
      template: resolve("src", "index.ejs"),
      inject: false,
      hash: true
    })
  ],
  devServer: {
    contentBase: resolve("public"),
    historyApiFallback: true,
    hot: true,
    inline: true,
    publicPath: "/"
  }
};

The .ejs template which sits at /src/index.ejs

<!doctype html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
    <div id="root"></div>
    <% for (var css in htmlWebpackPlugin.files.css) { %><link href="<%= htmlWebpackPlugin.files.css[css] %>" rel="stylesheet"><% } %>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>
</body>

</html>