webpack热更新

我们在用webpack打包文件，如果打包出来的资源是带有哈希值，每打一次包，就会出现一个不同哈希值的文件。为了避免后期出现很多资源文件，我们需要在每次打包把之前生成的资源先清除掉，然后再打包，这就需要安装clean-webpack-plugin插件。

当我们每次更改文件，要预览效果，都需要打包的话，那就显得太麻烦了。为了实现热更新，我是结合谷歌插件LiveReload实现的。

1. 安装http-server本地服务
2. 首先在谷歌游览器中安装LiveReload插件，使其处于工作状态
3. 命令行webpack --watch ,它会监控所有文件的改动，当监控到文件有改动的时候，就会自动打包

所有我们每次更改完文件，进行ctrl+s进行保存的时候，就可以在游览器上看到文件内容变动了。

此外也可以使用webpack的开发调试服务器webpack-dev-server，通过这个服务我们更多的是想实现无刷新的处理编译入口文件。

1. cnpm install webpack-dev-server --g (注意这里是全局安装)
2. 启动服务器 webpack-dev-server --progress --colors

我用的是第一种方法，至于第二种方法没有尝试过。

webpack常用插件

webpack.optimize.UglifyJsPlugin 插件无需安装，是自带的 压缩js文件

extract-text-webpack-plugin 剥离css样式为独立的文件

html-webpack-plugin 自动生成html文件

clean-webpack-plugin 用于在building之前删除你以前build过的文件