webpack第二篇.webpack-dev-server

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

安装  npm install wekpack-dev-server -D  

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

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

　const HtmlWebpackPlugin = require('html-webpack-plugin')

    const webpack = require('webpack')

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被禁用
},

　plugins: [
　　new HtmlWebpackPlugin({
　　　　template: './index.html'
　　})
　　// 热更新插件
　　new webpack.HotModuleReplacementPlugin()      //结合devServer的hot:true启动HMR
   ]

 配置 npm script :

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

 执行npm run dev 启动开发环境