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

webpack提供了一个可选的本地开发服务器，这个本地服务器是基于node.js搭建，内部使用express框架，可以实现想要让浏览器自动刷新显示我们修改后的结果。

---

我们需要在webpack使用之前安装它-->npm install --save-dev webpack-dev-server@2.9.1

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

• contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，这里我们需要填写./dist
• port：端口号
• inline：页面实时刷新
• historyApiFallback：在SPA页面中，依赖HTML5的history模式

---

安装好本地服务器之后，我们需要在webpack.config.js中进行配置，代码修改如下：

module.exports={
    ...
    devServer:{
        contentBase:'./dist',
        inline:true
    }
}

此外，我们还需要在package.json文件的scripts中添加，则在终端中测试时输入npm run dev之后，可使页面直接在本地服务器中打开。

  "dev": "webpack-dev-server --open"

 随后，当修改main.js或者vue模块时，可实现自动刷新。