webpack热跟新和文件指纹

本文详细介绍了webpack的热更新机制,包括watch文件监听、webpack-dev-server和webpack-dev-middleware的使用。同时,探讨了文件指纹的概念,如Hash、Chunkhash和Contenthash在文件命名中的应用,以及如何在JS、CSS和图片中设置文件指纹,确保更新后的资源能够正确缓存。
摘要由CSDN通过智能技术生成

一: 热跟新

1 watch 文件监听(非热跟新)

watch文件监听是需要手动的刷新浏览器。页面才能刷新内容。因为他是轮询文件的最后修改时间是否变化,当文件发生变化时,不会立刻告诉监听者,而是先缓存起来等待aggregateTimeout

	//默认false,不开启
	watch: true,
	// 只有开启监听模式,wacthOptions才有效
	watchOptions: {
			// 默认为空,不监听的文件或者文件夹
			ignored: '/node_modules',
			// 监听到发生变化后300MS去执行,摸摸人300MS
			aggregateTime: 300,
			// 判断文件是否发生变化是通过不断轮询文件是否有变化,默认每秒1000次
			poll: 1000
	}

2 webpack-dev-server (热跟新)

WDS 不输出⽂件,⽽是放在内存中,WDS 不输出⽂件,⽽是放在内存中,使⽤ HotModuleReplacementPlugin插件(webpack4+ 内置)

plugins: [
	new webpack.HotModuleReplacementPlugin()
],
devserver:{
	host:'localhost',  
    port:1573, 
    open:true, 
	contentBase: './dist',
	hot: true
}

3 webpack-dev-middleware(热跟新)

WDM 将 webpack

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值