Webpack hot module replacement does not remove prior dom element -
i not sure if following bug or if have things misconfigured. using webpack-dev-server , hot module replacement, if javascript code contains .appendchild, hmr re-adds dom element, not replace it. first code works correctly:
index.html:
<div id="app"> <p id="para"></p> </div> index.js:
var para = document.getelementbyid("para"); para.innerhtml = "hi there"; if(module.hot){ module.hot.accept(); } webpack-config.js:
var path = require("path"); var webpack = require("webpack"); // note configuring hot module replacement when combined devserver.js // each js file module add module.hot.accept() //also need change script in package.json using node command var entries = [ './src/index.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080' ]; module.exports={ entry:entries , output:{ path: path.join(__dirname,"/dist"), publicpath:"/dist/", filename:"bundle.js" } , plugins:[ new webpack.hotmodulereplacementplugin() ] }; devserver.js:
var webpackdevserver = require('webpack-dev-server'); var webpack = require('webpack'); var config = require('./webpack.config.js'); var path = require('path'); var compiler = webpack(config); var server = new webpackdevserver(compiler, { hot: true, filename: config.output.filename, publicpath: config.output.publicpath, stats: { colors: true } }); server.listen(8080, 'localhost', function() {}); note again, works, if remove paragraph tag index.html div exists , change index.js to:
var app = document.getelementbyid("app"); var para = document.createelement("p"); para.innerhtml = "hi there"; app.appendchild(para); if(module.hot){ module.hot.accept(); } then, each change innerhtml text causes hmr work no errors, re-adds new paragraph dom, leaving first paragraph (with old text), still visible , part of page.
any ideas? in advance
Comments
Post a Comment