webpack热跟新和文件指纹

最新推荐文章于 2024-06-10 18:35:57 发布

原创最新推荐文章于 2024-06-10 18:35:57 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack配置

配置同时被 2 个专栏收录

8 篇文章

订阅专栏

学习笔记

4 篇文章

订阅专栏

本文详细介绍了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] '
	}
	}]
	}
]

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