webpack热跟新和文件指纹

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

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

一: 热跟新

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 输出的⽂件传输给服务器,适⽤于灵活的定制场景

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-devmiddleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
	publicPath: config.output.publicPath
}));
app.listen(3000, function () {
	console.log('Example app listening on port 3000!\n');
});

二: 文件指纹

生成:
Hash:和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改
Chunkhash:和 webpack 打包的 chunk 有关,不同的 entry 会⽣成不同的 chunkhash 值
Contenthash:根据⽂件内容来定义 hash ,⽂件内容不变,则 contenthash 不变

JS的文件指纹

output: {
	filename: '[name][chunkhash:8].js',
}

CSS的文件指纹

设置 MiniCssExtractPlugin 的 filename,使⽤ [contenthash]

这个插件跟style-loader冲突,因为rules里面的css的style-loader是把css注入到header里面,所以不要style-loader

rules: [
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, css-loader]
	}
]
plugins: [
	 new MiniCssExtractPlugin({ 
	filename: `[name][contenthash:8].css
	});
]

图⽚的⽂件指纹设置

rules: [
{
test: /\.(png|svg|jpg|gif)$/,
use: [{
	loader: 'file-loader’,
	options: {
		name: 'img/[name][hash:8].[ext] '
	}
	}]
	}
]

占位符:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值