WebpackDevServer 和 Hot Module Replacement(热更新)

最新推荐文章于 2024-04-26 00:40:28 发布

Q♛

最新推荐文章于 2024-04-26 00:40:28 发布

阅读量2k

点赞数

文章标签： webpack

本文链接：https://blog.youkuaiyun.com/weixin_52139966/article/details/117818893

版权

本文介绍了如何使用WebpackDevServer提高开发效率，避免每次代码修改后手动刷新浏览器。WebpackDevServer将文件保存在内存中，加快编译和访问速度。接着讲解了Hot Module Replacement (HMR)的概念，当代码变动时，HMR会通知客户端并进行局部更新，以模块为单位。虽然原始内容未提供完整解决方案，但提到了HMR对样式文件的支持，以及针对html和js的处理方式。最后，文章简要对比了WebpackDevServer和HMR的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.WebpackDevServer

每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验.
1.安装:

npm install --save-dev webpack-dev-server

2.启动命令:

npx webpack serve
或
// package.json 中添加 scripts
...,
"scripts": {
 npx webpack-dev-server
}

3.webpack.json配置:

module.exports = {
  ...,
  devServer: {
  	// 生成的虚拟目录路径
  	contentBase: "./dist",
  	// 自动开启浏览器
  	open: true,
  	// 端口
  	port: 8081
	}
}

启动服务以后，webpack 不在会把打包后的文件生成到硬盘真实目录中了，而是直接存在了内存中(同时虚拟了一个存放目录路径)，后期更新编译打包和访问速度大大提升.

二.Hot Module Replacement (HMR)

只更新改变的部分.

module.exports = {
  ...,
  devServer: {
  	// 生成的虚拟目录路径
  	contentBase: "./dist",
  	// 自动开启浏览器
  	open: true,
  	// 端口
  	port: 8081,
  	// 开启热更新
  	hot:true,
  	// 即使 HMR 不生效，也不去刷新整个页面(选择开启)
    hotOnly:true,
  	proxy: {
      '/api': {
      	target: 'http://localhost:8787'
    	}
    }
	}
}

开启 HMR 以后，当代码发生变化，webpack 即会进行编译，并通过 websocket 通知客户端(浏览器)，我们需要监听处理来自 webpack 的通知，然后通过 HMR 提供的 API 来完成我们的局部更新逻辑

// ./fn1.js-
export default function() {
    console.log('start1!');
}

//  index.js
import fn1 from './fn1.js';
box1.onclick = fn1;

if (module.hot) {//如果开启 HMR
    module.hot.accept('./fn1.js', function() {
      // 更新逻辑
      box1.onclick = fn1;
    })
}

上面代码就是当 ./fn1.js 模块代码发生变化的时候，把最新的 fn1 函数绑定到 box1.onclick 上

从上面就可以看到，HMR 其实就是以模块为单位，当模块代码发生修改的时候，通知客户端进行对应的更新，而客户端则根据具体的模块来更新我们的页面逻辑(这些逻辑需要自己去实现)，好在当前一些常用的更新逻辑都有了现成的插件.
注:样式文件支持,js和html不支持热更新

html解决方案:
修改entry 添加html打包前的路径"./src/index.html"
js解决方案:需要添加支持HMR的代码(只支持非入口js文件)

import print from './print.js'
if(module.hot){

	//一但module.hot为true,说明打开了HMR的功能
	module.hot.accept('./print.js',function(){
		//监听js文件,一旦发生变化,其他默认不会重新打包构建.会执行后面的回调函数
		print()
	}
)}

注:WebpackDevServer和HMR的区别:

共同点：都可以自动打包并刷新页面内容。
不同点：WebpackDevServer每一次都是整体刷新页面，即使只是修改了很小的内容，也会刷新整个页面，无法保持页面操作状态。
Hot Module Replacement：它的核心的局部（模块）更新，也就是不刷新页面，只更新变化的部分。