Vue学习笔记-Day8 webpack-dev-server搭建本地服务器

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"