素材巴巴 > 程序开发 >

09.Webpack

程序开发 2023-09-07 10:48:02

目录

1.DevServer和VueCLI

1.1 搭建本地服务器(原因)

  1. 目前我们开发的代码,为了运行需要有两个操作:
  1. 操作一: npm run build,编译相关代码;
  2. 操作二:通过live server或者直接通过浏览器,打开index.html代码,查看效果;
  1. 这个过程影响开发效率,希望:文件发生变化,自动完成 编译和展示;
  2. 为了完成自动编译,webpack提供的几种可选方式:
  1. webpack watch mode;
  2. webpack-dev-server(常用);
  3. webpack-dev-middleware;

1.2 wabpack watch mode

  1. webpack提供了watch模式:
  1. 在该模式下,webpack依赖图中的所有文件,只要有一个文件发生了更新,那么代码将会重新编译;
  2. 我们不需要手动运行 npm run build 指令了;
  1. 开启watch的两种方式:
  1. 方式一:在导出的配置中,添加 watch:true;
  2. 方式二:在启动webpack的命令中,添加 --watch的标识;
    在这里插入图片描述
  1. webpack-cli 会对 --watch这个选项变为配置watch:true;

当运行 npm run build 之后,如果有一个文件改变会自动重新编译,自动刷新的功能是live-server提供的;

  1. 在这里插入图片描述

1.3 wabpack-dev-server

  1. 上面的方式可以监听到文件的变化,但是事实上它本身是没有自动刷新浏览器的功能;
  1. 目前我们可以在VSCode中使用live-server完成这样的功能;
  2. 我们希望不适用live-server,可以具备 **live reloading(实时重新加载)**的功能;
  1. 安装webpack-dev-server

npm install webpack-dev-server -D

  1. webpack3 以前 需要在 webpack-dev-server中启动,现在因为有webpack-cli,所以可以直接进行使用;

  2. 修改配置文件;
    在这里插入图片描述

  3. http://localhost:8080 这是DevServer搭建的一个本地服务器,基于express框架搭建的一个本地服务器;

  4. webpack serve 也是通过webpack-cli进行解析;

  5. webpack-dev-server 编译和打包之后的代码不会做输出,所以build中的文件夹是空的;

  6. webpack-dev-server 为了提高打包效率 将打包之后的文件直接传入到内存中;

  1. 事实上webpack-dev-serve使用了一个库叫memfs(内存的文件系统,memory-fs webpack);
  1. devServer中的 contentBase配置在这里插入图片描述
  2. 将源代码通过devServer进行打包,打包之后将所有静态资源放到内存里面memfs,开启一个express的服务,浏览器通过localhost:8080去访问服务器。访问服务器之后下载 index.html 文件,配置一个文件夹public,使用contentBase指定文件夹public,如果浏览器访问服务器下载的index.html其中在打包中没有找到静态资源,会去pulbic文件夹中去寻找。
  3. 开发阶段(contentBase),打包阶段(copyWebpackPlugin)

1.4 认识热模块替换(HMR)

  1. 什么是模块热替换?
  1. HMR全称Hot Module Replacement,翻译为模块热替换;
  2. 模块热替换是指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个页面;
  1. 浏览器总是刷新并不是很友好(需要保留页面的某些状态的时候);
  2. 非常消耗性能(在大型工程中);
  3. HMR通过以下几种方式,提高开发速度:
  1. 不重复加载整个页面,这样可以保留某些应用程序的状态不丢失;
  2. 只更新需要变化的内容,节省开发时间;
  3. 修改了css、js源代码,会立即在浏览器更新,相当于直接在浏览器的devtools中直接修改样式;
  1. 如何使用HMR?
  1. 默认情况,webpack-dev-server已经支持HMR,我们只需要开启即可;
  2. 在不开启HMR的情况下,修改源代码,整个页面自动刷新,使用的是live reloading
  1. 开启HMR
    在这里插入图片描述
  2. webpack 默认情况下 不清楚哪个模块要做热替换;
  3. 如果想让某个文件可以做热替换;
  1. module.hot.accept( “模块热替换路径”,“回调函数 监听替换之后的动作” )
    在这里插入图片描述

1.5 框架的HMR

  1. 开发项目中,需要手动写入module.hot.accept相关API?
  1. 开发中修改组件,进行热更行,如何操作?
  2. vue使用vue-loader,这个loader支持vue组件的HMR;
  3. react使用 React Hot Loader,实时调整React组件(目前官方弃用,改为react-refresh);

1.6 HMR的原理

  1. HMR的原理
  1. webpack-dev-server会创建两个服务:提供静态资源的服务(express)和Socket服务(net.Socket);
  2. express server负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析);
  1. HMR Socket Server,是一个socket的长连接:
  1. 长连接有一个最好的好处是建立连接后双方可以通信(服务器可以直接发送文件到客户端);
  2. 当服务器监听到对应的模块发生变化时,会生成两个文件.json(manifest文件)和.js文件(update chunk);
  3. 通过长连接,可以直接将这两个文件主动发送给客户端(浏览器);
  4. 浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新。
    在这里插入图片描述
  1. Http连接,短连接

客户端发送http请求 -> 和服务器建立链连接 -> 服务器做出反应 -> 做出反应

  1. Socket长连接

即时通信,微信、直播
长连接经过各种各样的连接之后建立一条通道,这条通道通过心跳包保持是否存在


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。