我们在用webpack打包文件,如果打包出来的资源是带有哈希值,每打一次包,就会出现一个不同哈希值的文件。为了避免后期出现很多资源文件,我们需要在每次打包把之前生成的资源先清除掉,然后再打包,这就需要安装clean-webpack-plugin插件。
当我们每次更改文件,要预览效果,都需要打包的话,那就显得太麻烦了。为了实现热更新,我是结合谷歌插件LiveReload实现的。
- 安装http-server本地服务
- 首先在谷歌游览器中安装LiveReload插件,使其处于工作状态
- 命令行webpack --watch ,它会监控所有文件的改动,当监控到文件有改动的时候,就会自动打包
所有我们每次更改完文件,进行ctrl+s进行保存的时候,就可以在游览器上看到文件内容变动了。
此外也可以使用webpack的开发调试服务器webpack-dev-server,通过这个服务我们更多的是想实现无刷新的处理编译入口文件。
- cnpm install webpack-dev-server --g (注意这里是全局安装)
- 启动服务器 webpack-dev-server --progress --colors