10天搞定webpack - webpack-dev-server

Posted 2022-06-13 littlechen

前面我们每次运行总是双击打开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