Skip to content
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

如何实现webpack的热更新? #137

Closed
i7eo opened this issue Dec 2, 2020 · 2 comments
Closed

如何实现webpack的热更新? #137

i7eo opened this issue Dec 2, 2020 · 2 comments

Comments

@i7eo
Copy link

i7eo commented Dec 2, 2020

具体场景是这样的:
现有 a.vm b.vm 俩个页面,a.vm 内容如下:

<div>this is a.vm</div>
#parse(b.vm)

a.vm 为dev server 的入口文件,当我修改 b.vm的内容时无法热更新;但是当我把 a.vm 中的 #parse(b.vm) 名称修改后立即触发热更新。

#parse我已经通过测试文件夹下的例子实现。

webpack-dev-server中监测模版变化的代码如下:

devServer: {
    ...,
    before(app, server, compiler) {
			const watchFiles = ['.vm'];
	 
			compiler.hooks.done.tap('done', () => {
			   const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);
	 
			   if (this.hot && changedFiles.some(filePath => watchFiles.includes(path.parse(filePath).ext))) {
				  server.sockWrite(server.sockets, 'content-changed');
			   }
			})
    }
}
@shepherdwind
Copy link
Owner

这个应该是和 webpack 相关的了,可以参考以前我搞定 css 热加载 load https://github.com/shepherdwind/css-hot-loader

https://www.yuque.com/eward/blog/osoew5

@i7eo
Copy link
Author

i7eo commented Dec 3, 2020

这个应该是和 webpack 相关的了,可以参考以前我搞定 css 热加载 load https://github.com/shepherdwind/css-hot-loader

https://www.yuque.com/eward/blog/osoew5

解决了,是因为写#parse命令的时候出了点问题。
修改后热更新正常,感谢回答

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants