Vue3学习之旅-webpack终章--热部署(更新)--跨域代理？拿来吧你！

vue3一路的笔记
vue3学习之旅–邂逅vue3-了解认识Vue3
vue3学习之旅–邂逅vue3-了解认识Vue3(二)
Vue3学习之旅–爱上Vue3–Vue3基础语法(一)–以及vscode基本使用和快速生成代码片段
Vue3学习之旅–爱上Vue3–Vue3的Options-API
vue3学习之旅–vue的表单和开发模式–组件化开发初识
Vue3学习之旅–初识webpack–webpack打包js，css，less等文件以及兼容性处理
Vue3学习之旅–之webpack基础-进阶–webpack5?拿来吧你！
vue3学习之旅–webpack5-babel整合sfc单文件vue组件

webpack-devServer和Vue-CLI

devServer(热部署)

目前我们开发的代码，为了运行需要有两个操作：

操作一：npm run build，编译相关的代码；

操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；

这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成 编译 和 展示；

为了完成自动编译，webpack提供了几种可选的方式：

1. webpack watch mode；
2. webpack-dev-server（常用）；
3. webpack-dev-middleware；

Webpack watch

webpack给我们提供了watch模式：

1. 在该模式下，webpack依赖图中的所有文件，只要有一个发生了更新，那么代码将被重新编译；
2. 我们不需要手动去运行 npm run build指令了；

如何开启watch呢？两种方式：

方式一：在导出的配置中，添加 watch: true；

方式二：在启动webpack的命令中，添加 –watch的标识；

方式二是在package.json的 scripts 中添加一个 watch 的脚本。

webpack-dev-server

上面的方式可以监听到文件的变化，但是事实上它本身是没有自动刷新浏览器的功能的：

1. 当然，目前我们可以在VSCode中使用live-server来完成这样的功能；
2. 但是，我们希望在不使用live-server的情况下，可以具备live reloading（实时重新加载）的功能；

安装webpack-dev-server

npm i webpack-dev-server -D

修改配置文件，告知 dev server，从什么位置查找文件：

module.exports = {
    // 其他配置均省略
  
  // 热部署（热更新）的配置
  devServer: {
    // 如果需要的资源没有在webpack里面加载到，会去contentBase指定的文件夹里面寻找
    contentBase: "./public",
  },
  // 打包的是node环境 还是 web 环境
  target: "web"
}

认识模块热替换

什么是HMR呢？

1. HMR的全称是Hot Module Replacement，翻译为模块热替换；
2. 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面；

HMR通过如下几种方式，来提高开发的速度：

1. 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
2. 只更新需要变化的内容，节省开发的时间；
3. 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式；

如何使用HMR呢？

1. 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可；
2. 在不开启HMR的情况下，当我们修改了源代码之后，整个页面会自动刷新，使用的是live reloading；

开启HMR

修改webpack的配置：

浏览器可以看到如下效果：

但是你会发现，当我们修改了某一个模块的代码时，依然是刷新的整个页面：

这是因为我们需要去指定哪些模块发生更新时，进行HMR；

框架的HMR

有一个问题：在开发其他项目时，我们是否需要经常手动去写入 module.hot.accpet相关的API呢？

1. 比如开发Vue、React项目，我们修改了组件，希望进行热更新，这个时候应该如何去操作呢？
2. 事实上社区已经针对这些有很成熟的解决方案了；
3. 比如vue开发中，我们使用vue-loader，此loader支持vue组件的HMR，提供开箱即用的体验；
4. 比如react开发中，有React Hot Loader，实时调整react组件（目前React官方已经弃用了，改成使用reactrefresh）；

HMR的原理

那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？

1. webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
2. express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；

HMR Socket Server，是一个socket的长连接：

1. 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
2. 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
3. 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；
4. 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；

HMR的原理图

hotOnly、host配置

host设置主机地址：

默认值是localhost；如果希望其他地方也可以访问，可以设置为 0.0.0.0；

localhost 和 0.0.0.0 的区别：

1. localhost：本质上是一个域名，通常情况下会被解析成127.0.0.1;
2. 127.0.0.1：回环地址(Loop Back Address)，表达的意思其实是我们主机自己发出去的包，直接被自己接收;
   • 正常的数据库包经常 应用层 - 传输层 - 网络层 - 数据链路层 - 物理层 ;
   • 而回环地址，是在网络层直接就被获取到了，是不会经常数据链路层和物理层的;
   • 比如我们监听 127.0.0.1时，在同一个网段下的主机中，通过ip地址是不能访问的;
3. 0.0.0.0：监听IPV4上所有的地址，再根据端口找到不同的应用程序；比如我们监听 0.0.0.0时，在同一个网段下的主机中，通过ip地址是可以访问的;

port、open、compress

prot

port设置监听的端口，默认情况下是8080

open

open是否打开浏览器：

1. 默认值是false，设置为true会打开浏览器；
2. 也可以设置为类似于 Google Chrome等值；

compress

compress是否为静态文件开启gzip compression：

默认值是false，可以设置为true；

Proxy

proxy是我们开发中非常常用的一个配置选项，它的目的设置代理来解决跨域访问的问题：

比如我们的一个api请求是 http://localhost:8888，但是本地启动服务器的域名是 http://localhost:8000，这 个时候发送网络请求就会出现跨域的问题；

那么我们可以将请求先发送到一个代理服务器，代理服务器和API服务器没有跨域的问题，就可以解决我们的跨 域问题了；

我们可以进行如下的设置

target：表示的是代理到的目标地址，比如 /api-hy/moment会被代理到 http://localhost:8888/api-mhy/moment

pathRewrite：默认情况下，我们的 /api-hy 也会被写入到URL中，如果希望删除，可以使用pathRewrite；

secure：默认情况下不接收转发到https的服务器上，如果希望支持，可以设置为false；

changeOrigin：它表示是否更新代理后请求的headers中host地址

module.exports = {
    devServer:{
        // 配置 proxy 代理 解决跨域问题
    // 只适用于开发阶段
    // 相当于请求交给本地服务器发送给远程的服务器
    // 然后请求到的数据在给页面的请求
    proxy: {
      // 配置映射关系
      // 相当于在项目中请求 /api地址 就是请求后面配置的地址
      "/api": {
        target: "http://www.baidu.com",
        // 路径重写 将 /api开头的请求地址的 /api 给替换为 "" 空字符串
        pathRewrite: {
          "^/api": ""
        },
        // 默认不支持 转发到https的服务器上，如果需要，设置 secure为false
        secure: false,
        // 是否更新代理后请求的headers中的host地址
        changeOrigin: true
      }
    },
    }
}

changeOrigin的解析

这个 changeOrigin官方说的非常模糊，通过查看源码我发现其实是要修改代理请求中的headers中的host属性：

1. 因为我们真实的请求，其实是需要通过 http://localhost:8888来请求的；
2. 但是因为使用了代码，默认情况下它的值时 http://localhost:8000；
3. 如果我们需要修改，那么可以将changeOrigin设置为true即可；

resolve模块解析

resolve用于设置模块如何被解析：

1. 在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
2. resolve可以帮助webpack从每个 require/import 语句中，找到需要引入到合适的模块代码；
3. webpack 使用 enhanced-resolve 来解析文件路径；

webpack能解析三种文件路径：

绝对路径 :由于已经获得文件的绝对路径，因此不需要再做进一步解析。

相对路径

1. 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录；
2. 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径；

模块路径

在 resolve.modules中指定的所有目录检索模块；

1. 默认值是 [‘node_modules’]，所以默认会从node_modules中查找文件；
2. 我们可以通过设置别名的方式来替换初识模块路径，具体后面讲解alias的配置；

确实文件还是文件夹

如果是一个文件：

1. 如果文件具有扩展名，则直接打包文件；
2. 否则，将使用 resolve.extensions选项作为文件扩展名解析；

如果是一个文件夹：

会在文件夹中根据 resolve.mainFiles配置选项中指定的文件顺序查找；

1. resolve.mainFiles的默认值是 [‘index’]；
2. 再根据 resolve.extensions来解析扩展名

extensions和alias配置

extentions

extensions是解析到文件时自动添加扩展名：

1. 默认值是 [’.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；
2. 所以如果我们代码中想要添加加载 .vue 或者 jsx 或者 ts 等文件时，我们必须自己写上扩展名；

alias

另一个非常好用的功能是配置别名alias

1. 特别是当我们项目的目录结构比较深的时候，或者一个文件的路径可能需要 …/…/…/这种路径片段；
2. 我们可以给某些常见的路径起一个别名；

如何区分开发环境

目前我们所有的webpack配置信息都是放到一个配置文件中的：webpack.config.js

1. 当配置越来越多时，这个文件会变得越来越不容易维护；
2. 并且某些配置是在开发环境需要使用的，某些配置是在生成环境需要使用的，当然某些配置是在开发和生成环 境都会使用的；
3. 所以，我们最好对配置进行划分，方便我们维护和管理；

那么，在启动时如何可以区分不同的配置呢？

1. 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；
2. 方式二：使用相同的一个入口配置文件，通过设置参数来区分它们；

入口文件解析

我们之前编写入口文件的规则是这样的：./src/index.js，但是如果我们的配置文件所在的位置变成了 config 目录， 我们是否应该变成 …/src/index.js呢

1. 如果我们这样编写，会发现是报错的，依然要写成 ./src/index.js；
2. 这是因为入口文件其实是和另一个属性时有关的 context

context的作用是用于解析入口（entry point）和加载器（loader）：

官方说法：默认是当前路径（但是经过我测试，默认应该是webpack的启动目录）

另外推荐在配置中传入一个值；

区分开发和生成环境配置

这里我们创建三个文件：

1. webpack.common.js
2. webpack.prod.js
3. webpack.dev.js

将公共代码和生产环境的配置以及开发时的配置分开，然后使用webpack-merge插件进行配置文件的合并。

webpack.common.js

// 公共的环境

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { DefinePlugin } = require("webpack");
// 引入Vue-loader的插件 帮助loader做一些事情
const { VueLoaderPlugin } = require("vue-loader/dist/index");
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, '../build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader"
        ]
      },
      {
        test: /\.less$/,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      // 处理图片
      {
        test: /\.(png|jpe?g|JPG)$/,
        type: "asset",
        generator: {
          filename: "image/[name]-[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            maxSize: 40 * 1024
          }
        }
      },
      {
        test: /\.(eot|ttf|woff2?)$/,
        type: 'asset/resource',
        generator: {
          // 这里使用的是filename属性 别忘了！！！！！
          filename: 'font/[name]-[hash:6][ext]'
        }
      },
      // 对js代码进行转换
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      // 配置 .vue文件的加载打包规则
      {
        test: /\.vue$/,
        loader: "vue-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 要注意：相对路径是从项目根路径出发的，！！！！！！！！！！！
      template: "./public/index.html",
      title: "babel 学习！"
    }),
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    }),
    new VueLoaderPlugin()
  ],
  // resolve 模块解析
  // 用于设置模块如何被解析
  resolve: {
    // 默认值就是 node_modules
    modules: ["node_modules"],
    // 文件拓展名 默认值有js mjs json wasm
    extensions: [".js", ".ts", ".json", ".vue"],
    // 如果加载的模块是一个文件夹 会自动去文件夹里面的 index.xx 文件来加载
    mainFiles: ["index"],
    // 配置路径的别名 
    alias: {
      // 在路径的地方使用的js，就代表后面的这个路径
      "js": path.resolve(__dirname, "../src/js")
    }
  },
  // 打包的是node环境 还是 web 环境
  target: "web"
}

webpack.prod.js

// 生产环境
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
// 合并当前环境和公共的common环境 使用 webpack-merge插件
const { merge } = require('webpack-merge')
// 导入 公共环境的配置
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
  mode: 'production',
  devtool: 'eval',
  plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin({
      patterns: [
        {
          from: "public",
          globOptions: {
            ignore: "**/index.html"
          }
        }
      ]
    }),
  ]
}
)

webpack.dev.js

// 开发环境

// 合并当前环境和公共的common环境 使用 webpack-merge插件
const { merge } = require('webpack-merge')
// 导入 公共环境的配置
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
  mode: 'development',
  devtool: 'source-map',

  // 热部署（热更新）的配置
  devServer: {
    // 如果需要的资源没有在webpack里面加载到，会去contentBase指定的文件夹里面寻找
    contentBase: "../public",
    // 开启HMR 热模块替换 (最好配置一下target属性，跟DevServer同级)
    hot: true,
    // 设置ip地址 主机
    host: "127.0.0.1",
    // 端口号
    port: 8800,
    // 是否在服务启动时打开浏览器
    open: true,
    // 开启 gzip压缩 传输速率提高(一般html这种文件不会压缩)
    compress: true,

    // 配置 proxy 代理 解决跨域问题
    // 只适用于开发阶段
    // 相当于请求交给本地服务器发送给远程的服务器
    // 然后请求到的数据在给页面的请求
    proxy: {
      // 配置映射关系
      // 相当于在项目中请求 /api地址 就是请求后面配置的地址
      "/api": {
        target: "http://www.baidu.com",
        // 路径重写 将 /api开头的请求地址的 /api 给替换为 "" 空字符串
        pathRewrite: {
          "^/api": ""
        },
        // 默认不支持 转发到https的服务器上，如果需要，设置 secure为false
        secure: false,
        // 是否更新代理后请求的headers中的host地址
        changeOrigin: true
      }
    },
  }

}
)