【整理篇】极速上手！webpack-dev-server的相关配置

Webpack-dev-server是一个小型的Express(Node.js) 服务器，可以通过配置webpack开发中间件来为项目服务，并且能够无需刷新，自动更新，使开发者在前端开发过程中拥有超快的反馈和超赞的体验（就是爽）。本篇主要讲解已有webpack4.x版本基础上，安装与配置相关文件，搭建起webpack-dev-server服务器，实现极速上手与简单理解。

由于本篇接【整理篇】上手webpack4！安装、配置文件、loader加载及常用命令详解，相同的问题将不再赘述，建议读者先浏览上篇文章再来读本篇^_^，文章第四部分记录了可能遇到的问题与解决方法，大家可以参考。

 

1. 安装webpack-dev-server

接上篇我们继续使用的cnpm淘宝镜像，命令行输入：

 cnpm install webpack-dev-server --save-dev

 cnpm install webpack-dev-server@3.1.0 -g

注：全局安装后可以在命令行直接通过"webpack-dev-server"来运行。我的webpack-dev-server是3.1.0版本。

版本问题：

报错如：    " npm WARN xxx @x.x.x requires a peer of webpack@^x.x.x but none is installed. You must install peer dependencies yourself "，" module.js:457     throw err;      ^Error: Cannot find module 'webpack/bin/config-optimist'  " 等属于版本问题。