写作不易,未经作者允许禁止以任何形式转载!
如果觉得文章不错,欢迎关注、点赞和分享!

[探索]Webpack DevServer和HMR原理 (juejin.cn)

Webpack-Dev-Server

为什么要搭建本地服务器

  • 目前开发的代码,为了运行需要有两个操作

    • npm run build编译
    • 通过live-server或者直接通过浏览器打开html文件,查看效果
  • 为了完成自动编译,webpack提供了几种可选的方式

    • Webpack watch mode
    • Webpack-dev-server
    • Webpack-dev-middleware

Webpack Watch Mode

  • webpack提供了watch模式

    • 在该模式下,webpack依赖图中所有文件,只要有一个发生了更新,那么代码将被重新编译。
    • 不需要手动npm run build
  • 如何开启?

    • 方式一:在导出的配置中,添加watch:true
module.exports = {
entry: "./src/index.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "build"),
},
watch:true,
}
  • 方式二:在启动webapck的命令中,添加–watch标识
npm script:{
"watch": "webpack --watch"
}
# npm run watch

Webpack Dev Server

  • 上面的方式可以监听到文件的变化,但是没有自动刷新浏览器的功能

    • webpack-dev-server可以实现
  • 安装

    • npm install --save webpack-dev-server
  • 修改npm script,同时可在配置文件中devServer属性下配置devServer

script:{
"serve":"webpack serve"
}
  • webpack-dev-server在编译之后不会写入到任何输出文件。而是将bundle文件保留在内存中
    • 事实上webpck-dev-server使用了一个叫memfs的库。

Webpack Dev Middleware

  • webpack-dev-middleware是一个封装器,它可以把webpack处理过的文件发送到一个server

    • webpack-dev-server在内部使用了它,然而它也可以作为一个单独的package来使用,以便根据需求进行更多自定义配置
    • 搭配一个服务器来使用它,比如express.
    • npm install --save express webpack-dev-middleware
  • 编写Server.js

const express = require("express")
const webpack = require("webpack")
const webpackDevMiddleware = require("webpack-dev-middleware")

const app = express()
const config = require("./webpack.config")
const compiler = webpack(config)

app.use(webpackDevMiddleware(compiler,{
publicPath:config.output.publicPath
}),()=>{
console.log("这里是回调函数")
})

app.listen(3000,()=>{
console.log("Server running")
})
  • Node Server.js即可运行起一个服务,并监听文件更改和刷新浏览器。

PublicPath

  • Output中有两个很重要的属性:path和publicPath

    • path:用于指定文件的输出路径,是一个聚堆路径
    • publicPath:默认是一个空字符串,它为我们项目中的资源制定一个公共的路径publicPath
  • 这个publicPath很不容易理解,其实就是给我们打包的资源,给它一个路径

    • 资源的路径 = output.publicePath + 打包资源的路径(比如"js/[name].bundle.js")
  • 常用的值

    • ./ :本地环境下可以使用这个相对路径
    • / :服务器部署时使用,服务器地址 + /js/[name].bundle.js
  • devServer的publicPath、output的publicPath和[webpackDevMiddleware的publicPath]需一致

ContentBase

  • devServer中contentBase对于我们直接访问打包后的资源其实并没有太大的作用,它的主要作用是如果我们打包后的资源,又依赖于其他的一些资源,那么就需要指定从哪里来查找这个内容:

    • 比如在index.html中,我们需要依赖一个 abc.js 文件,这个文件我们存放在 public文件中;
    • 在index.html中,我们应该如何去引入这个文件?
      • 比如代码是这样的:;
      • 这样打包后浏览器无法通过相对路径去找到这个文件夹;
      • 所以代码是这样:;
      • 如何让它去查找到这个文件的存在? 设置contentBase即可;
  • 当然在devServer中还有一个可以监听contentBase发生变化后重新编译的一个属性:watchContentBase。

Proxy代理

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

  • 设置
    • target:标识的是代理到的目标地址,比如/api/moment会被代理到http://localhost:8888/api/moment
    • pathRewrite:默认情况下,我们的/api也会被写入到URL中,如果希望删除,可以使用
    • secure:默认情况下不接受转发到https的服务器,如果希望支持,设置为false
    • changeOrigin:表示是否更新代理后请求headers中的host地址
    • historyApiFallback:解决SPA页面在路由跳转后,进行页面刷新返回404的错误
      • boolean值:默认是false,如果设置为true,刷新的时候,返回404错误时,会自动返回index.html的内容
      • object值:可以配置rewrites属性
        • 可以配置from来匹配路径,决定要跳到哪个页面,详情查阅官方文档。

Other Config

  • hotOnly

    • 默认情况下当代码编译失败修复后会刷新页面,不希望刷新设置hotOnly:true
  • host主机地址

    • 默认值是localhost
    • 如果其他PC也可以访问可设置0.0.0.0
  • localhost和0.0.0.0的区别

    • localhost本质上是一个域名会被解析为127.0.0.1
    • 127.0.0.1是一个会换地址,表达得意思是主机自己发出去的包,直接被自己接受
      • 正常的数据库包经常 应用层 -> 传输层 -> 网络层 -> 数据链路层 -> 物理层
      • 而回环地址,在网联络层直接就被获取
      • 监听127.0.0.1时,同个网段下的主机中,通过ip地址是不能访问的。
    • 0.0.0.0:监听IPV4上所有的地址,再根据端口找到不同的应用程序。
      • 监听0.0.0.0时,在同一个网段下的主机中,通过IP地址是可以访问的。
  • Port

    • 设置监听的端口,默认为8080
  • open是否打开浏览器

    • 默认为false,true会打开浏览器
    • 也可以设置类似于Google Chrome等值
  • compress是否为静态文件开启gzip compression

    • 默认是是false,可以设置为true

配置示例

devServer: {
hot: true,
hostOnly:true,
host:"0.0.0.0",
port:8080,
open:true,
compress:true,
proxy:{
"/api":{
target:"http://localhost:8888",
pathRewrite:{
"^/api":""
},
secure:false,
changeOrigin:true
}

}
}

Hot Module Replacement

  • 什么是HMR?

    • HMR全称Hot Module Replacement,翻译为模块热替换
    • 模块热替换是指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个页面。
  • HMR通过如下几种方式,来提高开发的速度。

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

    • 默认情况下,webpack-dev-server已经支持HMR,只需要开启即可。
    • 在不开启HMR的情况下,修改了源代码后,整个页面会自动刷新,使用的是live reloading。
  • 如何开启

    • 修改webpack.config.js
module.exports = {
entry: "./src/index.js",
output: {
filename: "js/bundle.js",
path: path.resolve(__dirname, "build"),
},
watch:true,
mode: "development",
devServer:{
hot:true
},
}
  • 更新后还是刷新整个浏览器,因为需要定义使用HMR的模块。
if(module.hot){
module.hot.accept("./App.vue",()=>{
console.log("vue更新了")
})
}

框架的HMR

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

  • 比如开发Vue、React项目,我们修改了组件,希望进行热更新,这个时候应该如何去操作?

  • 社区已经针对这些有很成熟的解决方案了:

    • 比如vue开发中,我们使用vue-loader,此loader支持vue组件的HMR,提供开箱即用的体验;
    • 比如react开发中,有React Hot Loader,实时调整react组件(目前React官方已经弃用了,改成使用react- refresh);

Vue的HMR

  • Vue的加载需要vue-loader,而vue-loader加载的默认会进行HMR处理

  • 安装加载Vue所需依赖

    • npm install vue-loader vue-template-compiler
  • 配置Webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module: {
rules: [
{
test: /\.vue$/,
use: ["vue-loader"]
},
]
},
plugins:[new VueLoaderPlugin()]

React的HMR

  • 在之前,React是借助React Hot Loader来实现HMR,目前已经改成使用react-refesh来实现了

  • 安装相关依赖

    • npm install @pmmmwh/react-refresh-webpack-plugin react-refresh
  • webpack.config.js

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin")

plugins: [
new ReactRefreshWebpackPlugin(),
],
  • babel.config.js
module.exports = {
presets: [
["@babel/preset-env", {
useBuiltIns: "usage",
corejs: 3.8
}],
["@babel/preset-react"],
["@babel/preset-typescript"]
],
plugins: [
['react-refresh/babel']
]
}

HMR的原理

image-20210502184548214

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

    • webpack-dev-server会创建两个服务:提供静态资源的服务(express)和Socket(net.Socket)
    • Express Server负责直接提供静态资源服务(打包后的资源直接被浏览器请求和解析)
  • HMR Socket Server是一个socket长连接

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

[探索]Webpack DevServer和HMR原理 (juejin.cn)

掘金:前端LeBron

知乎:前端LeBron

持续分享技术博文,关注微信公众号👇🏻

img