-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
How to watch and reload index.html by using webpack-dev-server together with html-webpack-plugin #100
Comments
Hmm this should work - could you please try the 2.0 version or provide a demo? |
Same problem i met. When i run plugin version:
|
Same
webpack: bundle is now INVALID.
Hash: 020f485713bee7553bdf
Version: webpack 1.12.14
Time: 154ms
Asset Size Chunks Chunk Names
./css/style?020f485713bee7553bdf.css 1.93 kB 0 [emitted] main
index.html 297 bytes [emitted]
chunk {0} ./js/bundle?020f485713bee7553bdf.js, ./css/style?020f485713bee7553bdf.css (main) 213 kB
+ 79 hidden modules
Child html-webpack-plugin for "homepage.html":
chunk {0} homepage.html 6.11 kB
+ 3 hidden modules
Child html-webpack-plugin for "index.html":
chunk {0} index.html 6.1 kB [rendered]
[0] ./~/html-webpack-plugin/lib/loader.js!./app/src/jade/index.jade 394 bytes {0} [built]
+ 2 hidden modules
webpack: bundle is now VALID. "devDependencies": {
"autoprefixer": "^6.3.3",
"babel-loader": "^6.2.3",
"babel-preset-es2015": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"clean-webpack-plugin": "^0.1.8",
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.9.0",
"jade": "^1.11.0",
"jade-loader": "^0.8.0",
"jquery": "^2.2.1",
"normalize.css": "^3.0.3",
"postcss-loader": "^0.8.1",
"precss": "^1.4.0",
"style-loader": "^0.13.0",
"stylus-loader": "^1.5.1",
"webpack-dev-server": "^1.14.1"
} |
"html-webpack-plugin": "^2.8.1", getting the same error |
any updates to this issue? |
@usergit I am sorry but I really don't get the problem - every thing works as expected. You change the html file, webpack sets the state to invalid and recompiles everything. Only hot-module replacement is not possible. |
😨 unfortunately and this is the things i met. When i change the html file, webpack does recompiled but page still have no refresh action.
|
@viko16 there is no auto refresh by now - would be open for pull requests :) |
Temporary solutions are always the best 😆
And you will have fast bundling time + reload but don't do this on production 😉 |
It seems like Vue has solved this with https://github.com/vuejs-templates/webpack/blob/master/template/build/dev-server.js#L32-L37 |
@pspeter3 wow that's nice - is there any way we could move this into this plugin? |
@jantimon I can try. I'll fork and submit a PR |
So I think the issue is that the plugin doesn't have access to the hot middleware plugin. It seems like the Vue dev server is doing the best thing. |
@19majkel94 Can you elaborate how you did it? i did import in my entry and did not reload the html. |
i came a long way defeating one by one.. .ts, .babel, .scss.... and then i got stuck at .html, no hot reload for this on vanilla html.... nor even auto reload.. any way to get this working some other how ? |
It looks like that this is really hard to accomplish on compiler level but could be accomplished on the level of the dev-server. I guess it might also be possible to write a custom html-webpack-hmr-plugin which would introduce a new entry point e.g. using https://github.com/jantimon/extra-entry-webpack-plugin which does the hmr - maybe you want to start working on that? |
Running it doesn't generate the |
@windmaomao that's completely unrelated to this thread - it's a performance boost by webpack-dev-server and can be solved by https://github.com/jantimon/html-webpack-harddisk-plugin or by setting the output filesystem - for further information please open a stackoverflow question |
In case if needed, here's working setup with hot reload of .js and index.html For production: webpack.config.js
package.json
/src/main.js
|
i think yet a better solution was doing something like this devServer: {
contentBase: [ PathToTheFolderWhereYourHTMLsLives ],
watchContentBase: true
} this approach doesnt require any "requiring" inside js files... |
My approach is a hot reload and not full page reload. |
Again, I just hate the fact that I need to add 'unnecessary' stuff in my js entries.. And somehow remember to remove that.. Or just leave there... Yet the one I showed still has HMR with js but with the html files will do a full page reload yes. Both ways not ideal.. Would rather study a possibility to create a plugin to inject html webpack plug-in outputs as an webpack entry and somehow get it done automatically... |
Using |
When you change the templates, the html-webpack-plugin does recompiling them, but it just not to re-write the new generated html files to the disk. Given this, even if the devServer reloading the pages, the result will not change. If you are in this case, try this plugin: |
No need to write to disk or open more sockets: just use the let devServer; // set below
module.exports = {
plugins: [reloadHtml],
devServer: {
before(app, server) {
devServer = server;
}
}
}
function reloadHtml() {
this.plugin('compilation',
thing => thing.plugin('html-webpack-plugin-after-emit', trigger));
const cache = {};
function trigger(data, callback) {
const orig = cache[data.outputName];
const html = data.html.source();
// plugin seems to emit on any unrelated change?
if (orig && orig !== html)
devServer.sockWrite(devServer.sockets, 'content-changed');
cache[data.outputName] = html;
callback();
}
} I'm sure someone can make a nice plugin out of this with more style, but this works for me. |
Thanks @avdd for the quick work-around, which worked for me (even though I wish this somehow worked out of the box between html-webpack-plugin and webpack-dev-server). If anyone else runs into Webpack 4's deprecation warning:
You can change function reloadHtml() {
const cache = {}
const plugin = {name: 'CustomHtmlReloadPlugin'}
this.hooks.compilation.tap(plugin, compilation => {
compilation.hooks.htmlWebpackPluginAfterEmit.tap(plugin, data => {
const orig = cache[data.outputName]
const html = data.html.source()
// plugin seems to emit on any unrelated change?
if (orig && orig !== html) {
devServer.sockWrite(devServer.sockets, 'content-changed')
}
cache[data.outputName] = html
})
})
} |
@sebastianseilund not able to get this working
and indeed
webpack 4.8 |
NVM, it was a result of bad ordering in webpack-merge, where our custom |
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
Every time I change the index.html template, I need to re-run the build task now.
The text was updated successfully, but these errors were encountered: