webpack 2 webpack-dev-server

前面咱们每次运行老是双击打开dist下的index.html文件，然而在咱们作项目的时候这样是不行的，咱们须要启动一个本地服务。这里咱们使用webpack提供的webpack-dev-server。

安装  npm install wekpack-dev-server -D  

   wekpack-dev-server内部经过express实现, 运行时并不真正的生成打包文件，只是生成内存中的打包。

  下面是webpack-dev-server的一些配置  

devServer: {   //开发服务器的配置
    host: 0.0.0.0,   //主机号
    port: 3000,      //端口号
    hot: true,       //热替换
    hotOnly: true,   //编译失败时不刷新页面，只适用于cli
    progress: true,  //进度条
    contentBase: './dist',  //静态服务根路径
    compress: true,       //对静态资源使用gzip压缩
    headers: {            //向全部请求添加header
      'token': '3M46VI52N35MPZN409'
    },
    historyApiFallBack: {   //用来应对返回404页面时定向到特定页面用的
        rewrites: [{
            form: /./, to: '/404.html'
        }]
    },
    proxy: {   //代理
        "/api": "http://localhost:8080",          //对/api/users的请求将会经过代理请求到http://localhost:8080/api/users
        "/m": {
            target: "http://localhost:9090",      //若是不想将/m传递过去，须要重写path
            pathRewrite: {"^/m" : ""}
        },
        "/info":  {
            target: "http://localhost:5555",
            bypass: function(req, res, proxyOptions) {         //对于浏览器的请求，只但愿提供html网页的访问，而对于api请求，则将请求代理到指定服务。
                if (req.headers.accept.indexOf("html") !== -1) {
                    console.log("Skipping proxy for browser request.");
                    return "/index.html";
                }
            }
        }
    },
    https: {   //支持HTTPS  开发环境应该不多用到吧
        
    },
    overlay: true,    //编译出错的信息会展现在浏览器上
    stats: "errors-only",        //控制编译的时候shell上的输出内容  errors-only-产生error日志  minimal-只打印errors或文件第一次被编译时   none-禁止打印日志  normal-标准打印日志  verbose-打印全部日志
    quiet: true,  //当它被设置为true的时候，控制台只输出第一次编译的信息，当你保存后再次编译的时候不会输出任何内容，包括错误和警告  默认false
    lazy: true,   //只有在请求时才进行编译，webpack不会监控文件的变化。当在lazy模式下，watchOptions将不会被启用。若是在CLI下使用，须要确保inline mode被禁用
}

 配置 npm script :

"scripts": {
  "dev": "webpack-dev-server --config webpack.config.dev.js"
}

开发环境服务跑起来~~~    npm run dev