Skip to content

Instantly share code, notes, and snippets.

@ampedandwired

ampedandwired/README.md

Last active October 6, 2022 06:40
Show Gist options
  • Save ampedandwired/becbbcf91d7a353d6690 to your computer and use it in GitHub Desktop.
Save ampedandwired/becbbcf91d7a353d6690 to your computer and use it in GitHub Desktop.
Download ZIP
webpack-dev-server with html-webpack-plugin
Raw
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.
Raw
index.js
document.body.innerHTML = "<p>Here 'tis</p>";
Raw
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 <[email protected]> (https://github.com/ampedandwired)",
"license": "MIT"
}
Raw
webpack.config.js
HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
@puiutucutu
Copy link

puiutucutu commented Jan 19, 2018 •
edited
Loading

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