webpack html模板编译现在有好的解决方法了吗？

[listingzhao]

我也遇到和楼主一样的问题，热加载不能监听到模板文件的变动，用的是koa-webpack-dev-middleware 只好在改动模板文件后，执行webpack命令打包一下，尝试了监听模板文件变动重新打包，但是每次改一个页面，就全部打包，耗时太长，效率低下，有什么好的解决方法吗？

[vhtml]

这里我有一个思路可以分享一下。
静态资源就不用说了，编译到内存中，可以Hot Reload，但是模板不行，模板需要写在硬盘上，这样koa才可以读取到。
可是怎么写到硬盘上呢？

完全重编译

监听模板文件变化，使用webpack编译一次。 这样会把所有的静态资源写到硬盘上，显然效率非常低，并不可取。

只编译模板

借鉴webpack插件的写法how to write a plugin，在emit事件里，只将模板文件写到硬盘上。如下这样：

// 更新模板
compiler.plugin('emit', function (compilation, cb) {
  for (var filename in compilation.assets) {
    if (filename.endsWith('.html')) {
      let filepath = path.resolve(viewPath, filename)
      let dirname = path.dirname(filepath)
      if (!fs.existsSync(dirname)) {
        mkdir('-p', dirname)
      }
      fs.writeFile(filepath, compilation.assets[filename].source())
    }
  }
  cb()
})

这样会在每次模板变动触发webpack编译事件时，把相应模板文件重新写入硬盘。

使用这种方法开发时，最好把koa的模板缓存关闭。

[listingzhao]

感谢楼主提供的思路，下午写了个插件实现了，因为咱们每次改动的只是一个模板文件，判断下改动了哪个文件并把它写到koa view中，效率提升了好多，回头再来个自动刷新，发现个现象就是 webpack编译 emit事件不止执行了一次，貌似每编译一小部分文件就会执行一次！

[8427003]

还他妈有一个问题没解决，就是在dev模式下，新增了一个html文件，尼玛这个文件不参与编译（除非你重启webpack）

[Deleted user]

我自己写了个webpack的插件， 不用生成文件到硬盘，监听html-webpack-plugin的hook，模板文件改变时使浏览器自动刷新，大家可以看看。refresh-browser-webpack-plugin