搭建本地服务器

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

2.不过它是一个单独的模块，在webpack中使用前需要先安装她

cnpm install --save-dev webpack-dev-server@2.9.1

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

   --  contentBase:为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist

   -- port:端口号

   -- inline:页面实时刷新

   -- historyApiFallback:在SPA页面中，依赖HTML5的history模式

4.wepack.config.js文件配置修改如下：

 

5.我们可以再配置另外一个scripts:

 --opn参数表示直接打开浏览器

module: {

  devServer:{
    contentBase:"./dist",  
    inline:true,


}

另外在package.json中修改脚本：以后在终端执行npm run dev 就启动服务器了

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open" //配置这个就可以了 open是直接打开浏览器
  },