Webpack dev-server搭建本地服务

WebPack-dev-server搭建本地服务器

---

dev-server简述

用途:实现浏览器自动刷新来显示效果,这在Vue开发时是个好用的东西.
dev-server是一个可选的本地开发服务器,基于node,js创建,内部使用express框架.
express框架可以服务于某个文件夹,会一直监听其中的代码是否改变,一旦改变会对所有改变的代码重新编译,编译后的代码会由express生成一些新的东西先放入内存,不会映射入盘,不会有任何输出;发布时npm run build才会添加到盘.
服务器读取文件时,存在于盘中的文件,被读取速度远远小于内存中的文件.

---

一、安装&配置dev-server

安装
呼出终端输入指令;

npm i webpack-dev-server -D

为了防止跟其他插件不兼容,还是记得规定下版本;
这里不推荐高版本,会出现与webpack-cli不兼容;
配置
在webpack.config.js中添加devserver对象进行配置,对象内可设置属性:

属性	作用
contentBase	为哪个文件夹提供服务,默认是webpack.config.js所在的根文件夹.
port