I've got an extremely simple webpack setup, I'm trying to make automatic reload work. I've got all files in the root directory of the project, to keep things simple.
index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack</title>
</head>
<body>hello</body>
<script src="app.js"></script>
</html>
webpack.config.js
:
module.exports = {
context: __dirname,
entry: {
javascript: "./app.js",
html: "./index.html",
},
output: {
filename: "bundle.js"
},
watch: true,
module: {
loaders: [
{
test: /\.html$/,
loader: "file?name=[name].[ext]",
},
],
},
}
and app.js
:
console.log("hello everyone!");
To run webpack, I execute:
$ ./node_modules/.bin/webpack-dev-server --inline
When I change any of the files, I can see webpack-dev-server
recompiles, which works fine. However, I still need to refresh the whole page to update new content. I thought I should not need to do that, when using --inline
option.
I found out that if I add following line to my html:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
then auto-reload works fine. But html should NOT contain this line, becuase:
inline
should handle that. Either CLI param or the attribute in webpack.config.js
file. I used both, neither works. I don't know why the inline
thing doesn't work.
Webpack Dev Server inline mode depends on publicPath. You can add publicPath in your webpack.conf, and address your js file like this: <script src="assets/app.js"></script>
. Then the inline mode will work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.