Skip to content

Instantly share code, notes, and snippets.

@ampedandwired ampedandwired/README.md
Last active Jul 9, 2019

Embed
What would you like to do?
webpack-dev-server with html-webpack-plugin
$ 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.
document.body.innerHTML = "<p>Here 'tis</p>";
{
"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"
}
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
@JacobWay

This comment has been minimized.

Copy link

JacobWay commented Jan 19, 2017

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]

@dietergeerts

This comment has been minimized.

Copy link

dietergeerts commented May 11, 2017

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.

@cunjieliu

This comment has been minimized.

Copy link

cunjieliu commented May 24, 2017

I also meet this problem!

@ashugit

This comment has been minimized.

Copy link

ashugit commented Jun 9, 2017

+1 to this problem

@yvanwangl

This comment has been minimized.

Copy link

yvanwangl commented Jun 16, 2017

+1, but how to resolve this problem?

@coot

This comment has been minimized.

Copy link

coot commented Jun 16, 2017

+1

@yvanwangl

This comment has been minimized.

Copy link

yvanwangl commented Jun 16, 2017

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

@gotpop

This comment has been minimized.

Copy link

gotpop commented Jun 19, 2017

+1

@xin-

This comment has been minimized.

Copy link

xin- commented Jul 17, 2017

+1

@benjaminadrom

This comment has been minimized.

Copy link

benjaminadrom commented Jul 25, 2017

+1

@DominikSerafin

This comment has been minimized.

Copy link

DominikSerafin commented Aug 31, 2017

@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
}),
...
@KirinHuang

This comment has been minimized.

Copy link

KirinHuang commented Sep 18, 2017

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

@liuliangsir

This comment has been minimized.

Copy link

liuliangsir commented Sep 18, 2017

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

@octatone

This comment has been minimized.

Copy link

octatone commented Sep 22, 2017

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(),
  ...
@chrisregner

This comment has been minimized.

Copy link

chrisregner commented Nov 24, 2017

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

@puiutucutu

This comment has been minimized.

Copy link

puiutucutu commented Jan 19, 2018

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.

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.