DevServer:
devserver会启动一个http服务器用于服务网页请求,接收webpack发出的文件变化的信号。通过websocket协议自动刷新网页,实现实时预览。
安装:
npm i webpack-dev-server -D
启动:
webpack-dev-server
devserver会把webpack构建出来的文件保存在内存中,要访问输出的文件时,必须通过http服务进行访问。通过devserver启动的webpack自动开启监听模式。
只有entry和依赖的文件才会被webpack添加到监听列表,所以修改index.html不会触发页面刷新。
办法:raw-loader --->将html作为字符串拉入js中,然后在index.js中require('./index.html'),这时候修改index.html,页面也会刷新了。
模块热替换:
devserver还支持一种模块热替换的技术。 不用重载刷新整个页面,只是将更新过的模块替换老的模块,再重新执行一次来实现实时预览。热替换默认是关闭的,
要开启模块热替换,只需要在启动devserver时带上--hot参数。
支持source map