$ npm install
$ ./node_modules/.bin/webpack-dev-server
$ open http://localhost:8080/webpack-dev-server/Notes:
http://localhost:8080/webpack-dev-server/index.html.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 <[email protected]> (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()] | |
| } |
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.
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>
@JacobWay @dietergeerts and others - it seems like it can be fixed by the
templateoption of the html-webpack-plugin. Like example below.