webpack-dev-server搭建本地服务器
webpack-dev-server是基于node进行搭建,内部使用express框架。这个本地服务器的作用相当于热部署,我们不需要在每次更改代码后都去重新打包。
基本原理:对代码进行监听,如果发生改变,就重新进行编译,然后将编译生成的文件缓存到内存中,而不像打包后自动写入磁盘。放在内存中,读写速度都比较快,这样方便我们进行开发调试
安装配置
安装webpack-dev-server,为了配合webapck 3.6.0版本,所以版本2.9.1
npm install webpack-dev-server@2.9.1 --save-dev
配置:
在webpack.config.js中设置需要服务的文件夹,即对dist文件夹进行服务:
在package.json中配置简化入口,和 build类似
运行结果:
如果要配置运行完成后自动打开浏览器:
则可以在script的dev配置后面增加:–open
"dev": "webpack-dev-server --open"