webpack html模板编译现在有好的解决方法了吗?
listingzhao opened this issue · 4 comments
listingzhao commented
我也遇到和楼主一样的问题,热加载不能监听到模板文件的变动,用的是koa-webpack-dev-middleware 只好在改动模板文件后,执行webpack命令打包一下,尝试了监听模板文件变动重新打包,但是每次改一个页面,就全部打包,耗时太长,效率低下,有什么好的解决方法吗?
vhtml commented
这里我有一个思路可以分享一下。
静态资源就不用说了,编译到内存中,可以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 commented
感谢楼主提供的思路,下午写了个插件实现了,因为咱们每次改动的只是一个模板文件,判断下改动了哪个文件并把它写到koa view中,效率提升了好多,回头再来个自动刷新,发现个现象就是 webpack编译 emit事件不止执行了一次,貌似每编译一小部分文件就会执行一次!
8427003 commented
还他妈有一个问题没解决,就是在dev模式下,新增了一个html文件,尼玛这个文件不参与编译(除非你重启webpack)
Deleted user commented
我自己写了个webpack的插件, 不用生成文件到硬盘,监听html-webpack-plugin的hook,模板文件改变时使浏览器自动刷新,大家可以看看。refresh-browser-webpack-plugin