WebpackDevServer的配置可以极大的提高开发效率,通过对webpack1.0.6之前的操作和配置,查看代码更新和挂载情况都要手动去输入 npm run bundle 来打包代码,这在开发中是很消耗时间的。
webpack - watch
webpack 中有一个watch的参数。
终端输入 npm run watch
watch // webpack 会自动侦听代码的变化,webpack就会重新打包。浏览器需要手动刷新重新加载渲染页面。
webpack - devServer
终端输入 npm install webpack-dev-server -D 下载webpack-dev-server

contentBase //开启的服务器文件夹位置。
open //开启默认浏览器。
port //修改端口号。
proxy //跨域配置。
devserver 不需要下载,是webpack自带的一个配置项。侦听到代码变化重新打包并且自动刷新页面。可以发送ajax请求,并不是配置了跨域,而是如果不用devserver侦听代码,地址栏是以file文件形式打开文件,而devserver开启的是http://localhost的网路地址的形式开启的页面。
webpack - Module Replacement
当使用devserver时,虽然能够重新打包并自动刷新浏览器。但刷新浏览器会丢失已经处理好的数据,当你改变一个数据时想查看挂载之后的效果,结果发现之前的数据已经变成了初始值,这是我们都不想看到的情况。那么wepack的devserver还有另外一个配置项就是hot,也就是热更新机制。


引入 webpack
devserver:{
root //开启热更新机制。
hotOnle //不修改不刷新。
}
new webpack.HotModuleReplacementPlugin()