第四篇 工程化 - 基于 webpack 从零构建 vue3.x 项目基本流程三

devServer 【 webpack-dev-server 】 概述

1、什么是 devServer 【 webpack-dev-server 】

  1、在开发过程中，想实时看到代码变更后我们的项目效果时，我们就会启动一个服务来监听代码文件变化，并将新的变更及时的展现在我们的浏览器上，极大的提高了我们的开发效率，这就是 webpack-dev-server 带给我们的东西
  
  2、webpack-dev-server 为我们实现了在开发时 实时更新最新代码的能力 也就是 热更新
  
2、最新 Webpack 5 【 webpack-dev-server 】  还支持

  1、反向代理配置
  
  2、防火墙
  
  3、Socket
  
  4、gzip 压缩 等功能  

基于 webpack 从零构建 vue3.x 项目 - devServer 配置

1、安装 webpack-dev-server

  yarn add webpack-dev-server -D
  
2、webpack.config.js 下添加 相关配置

devServer: {
  contentBase: path.resolve(__dirname, './dist'),
  port: 8080,
  publicPath: '/'
}

 提示 webpack4.x 后 的配置写法

  devServer: {
    static: {
      directory: path.resolve(__dirname, "./dist"),
      publicPath: "/",
    },
  },

3、修改 package.json 运行脚本

"scripts": {
   "dev": "webpack serve --progress --config ./webpack.config.js"
}

提示

  webpack-cli 升级到 4.x 的时候，就不能用 webpack-dev-server 跑脚本了，而是改为 webpack serve 去跑
  
4、配置成功

   静态资源 main.js 会跑在浏览器的内存里，热更新的速度那是相当快

webpack-dev-server 扩展

1、webpack-dev-server 是一个模块化开发的解决方案，他封装了 webpack，并作为一个简易的Node.js 服务器 供静态开发使用

2、虽然起步稍微复杂一些，但是环境搭好之后，无论对于新手还是老手，开发体验提升很大，对于工程化开发有很大的帮助

3、webpack-dev-server 提供的常见能力 有

  1、webpack-dev-server 就是一个基于 Node.js 和 webpack 的一个简易服务器，它在服务器端进行构建打包
  
  2、webpack-dev-server 代码中注入了一份 runtime，来建立 webpack-dev-server 和客户端的联系
  
  3、webpack-dev-server 和客户端建立联系之后，可以做很多的事情，比如 自动刷新、热替换等
  
  4、webpack-dev-server 还提供了 代理功能，代理有很多应用场景，举几个简单的例子
  
     1、本地数据接口模拟
    
     2、远端接口调试 【 可以处理 跨域 问题 】
    
     3、分拆接口到不同的远端服务器等
    
    实际项目中，我们可以使用代理来整合 前端项目 和 后台项目，也可以使用两个项目并行的方式来整合，也就是直接建立前端项目和后段项目的联系，这个方案对于多页应用更具有通用性。 
    
  5、webpack-dev-server 还有一些自己的配置项

webpack-dev-server 代理配置

1、webpack-dev-server 使用 http-proxy-middleware 来实现跨域代理

2、webpack 简单 配置代理 示例

devServer: {

    static: {
      directory: path.resolve(__dirname, "./dist"),
      publicPath: "/",
    },

    proxy: {
      "/api": {
        target: "http://www.baidu.com",
        pathRewrite: { "^/api": "" },
        changeOrigin: true,   // target 是域名的话，需要这个参数
        secure: false,       // 设置支持 https 协议的代理
      },
      "/api2": {
        // ...
      },
    },
  },

参数说明 -- '/api'

1、捕获API的标志，如果API中有这个字符串，那么就开始匹配代理

2、如 API 请求 /api/users , 会被代理到请求 www.baidu.com/api/users

参数说明 -- target

1、代理的 API 地址，就是需要跨域的 API 地址

2、地址可以是域名, 如：http://www.baidu.com

3、也可以是 IP 地址：http://127.0.0.1:3000

4、如果是 域名 需要额外添加一个参数 changeOrigin: true，否则会代理失败

参数说明 -- pathRewrite

1、路径重写，也就是说会修改最终请求的 API 路径

  1、比如访问的 API 路径：/api/users, 设置 pathRewrite: {'^/api' : ''}
  
  2、最终代理访问的路径：http://www.baidu.com/users
  
2、这个参数的目的是给代理命名后，在访问时把 命名 删除掉

参数说明 -- changeOrigin

这个参数可以让 target 参数是域名

参数说明 -- secure

secure: false

  1、不检查安全问题
  
  2、可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器

其他参数配置查看 http-proxy-middleware 文档

https://github.com/chimurai/http-proxy-middleware