devServe

简介

Webpack 的使用目前已经是前端开发工程师必备技能之一。若是想在本地环境启动一个开发服务快速开发我们的应用（而不是每次 coding 完，手动执行 run build，全量打包），大家只需在 Webpack 的配置中，增加 devServer 的配置即可。它的作用主要是用来伺服资源文件。 webpack-dev-server（以下简称 wds） 已经为我们封装好了全面、丰富且可配置化的功能，配置工程师们只需通过 webpack.config 和 命令行参数 即可满足开发所需。 然而配置工程师们，发现 wds 的 hot、live reload 实际上相当于启用了一个 express 的 Http 服务器 + webpack-dev-middleware（以下简称 wdm） 等中间件。这个 Http 服务器 和 用户访问服务的 client 可以通过 websocket 通讯协议建立长连接，在 webpack ‘watch’ 到原始文件作出改动后，wds 会使用 webpack 的实时编译，再用 wdm 将 webpack 编译后文件会输出到内存中。每当应用程序请求一个文件时，wdm 匹配到了就把内存中缓存的对应结果以文件的格式返回给 client ，反之则进入到下一个中间件。 如果想要使用更多 wds 提供的配置功能，比如 proxy、static、open 等， 在 server 端增加中间件即可，这样配置工程师摇身一变，配置开发工程师！ 项目中的 devServer 我们更多是使用 webpack + express + webpack-dev-middleware + webpack-hot-middleware 的组合来完成 HMR。

功能点

1. webpack 配合一个开发服务器，可以提供热重载功能
2. 快速内存访问打包资源
3. HMR模块热更新
4. 服务自动启动
5. 提供history api降级方案 - historyApiFallback
6. 提供代理功能 - proxy
   • 如果你有一个单独的后台 API 服务，你可以通过代理，把前端项目域名下发起的 API 请求，代理到后台的域名。
   • 解决开发环境中的跨域问题
   • 通过代理你还可以定制返回的 html 页面，比如同一个项目中你想要提供 PC、H5 两端的产物，通过 UA 判断，返回不同的打包产物 index.html or index.mobile.html
   • 代码打包编译出现警告和错误时，会在在页面上显示错误信息 - overlay
7. output.path、output.publicPath、devServer.publicPath、devServer.contentBase
   • output.path 打包输出产物的绝对路径
   • output.publicPath 它会为所有打包后的资源指定一个基础路径，多用于静态资源服务器或者 CDN 托管静态资源
   • devServer.publicPath 挂载到服务器中间件的可访问虚拟地址
   • devServer.contentBase 加载这个配置下（文件夹下）的静态资源到服务器

基本使用

在package中设置

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config lg.webpack.js",
    "serve": "webpack serve "
  },

webpack

devServe:{
    hot:true,
  port:9000,
  open:true  
}

基本配置属性

    hot: true,
    hotOnly: true,
    port: 4000,
    open: false,
    compress: true,
    historyApiFallback: true,
    proxy: {
      // /api/users
      // http://localhost:4000/api/users
      // https://api.github.com/info/users
      // /api/users---> 返回
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: { "^/api": "" },
        changeOrigin: true
      }
    }

hot

默认值就是true,它会自动应用 webpack.HotModuleReplacementPlugin

hotOnly: true

在构建失败时不刷新页面作为回退

在webpack5是

hot：'only'

compress

启动gzip压缩

historyApiFallback

为vue或者react的history模式提供一种代理，会访问路径时候回退到index.html

proxy

代理

如果请求的是/api/user http://localhost:4000/api/users
会被代理到target，https://api.github.com/info/users

    proxy: {
      // /api/users
      // http://localhost:4000/api/users
      // https://api.github.com/info/users
      // /api/users---> 返回
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: { "^/api": "" },
        changeOrigin: true
      }
    }