写在前面：
（1）为了防止版本兼容问题，此处的webpack版本与之前的一致为： webpack@3.6.0 。同时这里我们安装的 webpack-dev-server 版本是2.9.7版本。
（2）之前已经安装了node.js
在此之前我们一直采用 live-server 充当本地服务器，其实这与 webpack 是不怎么搭配的，现在我们可以利用 webpack 自带的 webpack-dev-server 来构建一个本地服务器（基于 node.js 架构）--让浏览器检测代码修改，并自动刷新修改后的结果。由于 webpack-dev-server 是一个单独的组件，因此在 webpack 中进行配置之前需要单独安装它作为项目依赖。

1.安装webpack-dev-server

本地安装指定版本的webpack-dev-server：

npm install --save-dev webpack-dev-server@2.9.7
        //设置基本目录结构
        contentBase:path.resolve(__dirname,'dist'), //本地服务器所加载的页面所在的目录
        //服务器的IP地址，可以使用IP也可以使用localhost
        host:'localhost',
        //服务端压缩是否开启
        compress:true,
        //配置服务端口号
        port:1818
1.contentBase:配置服务器基本运行路径，用于找到程序打包地址。

2.host：服务运行地址，建议使用本机IP。

3.compress：服务器端压缩选型，一般设置为开启。

4.port：服务运行端口，建议不使用80，很容易被占用，这里使用了1818

2.2 命令配置
由于webpack-dev-server是本地安装的，相关文件被安装到了本地目录的的开发环境中。然后需要在package.json中手动配置命令才能运行node_modules下面的相关指令；直接运行 webpack-dev-server命令会无法找到内部或外部命令。

/package.json：
"scripts": {
    "server":"webpack-dev-server"
结构图为：