Webpack中的文件指纹
Webpack中的文件指纹
越陌度阡
发布于 2023-01-04 08:23:23
发布于 2023-01-04 08:23:23
1. 什么是文件指纹？
文件指纹就是打包后输出的⽂件名的后缀，主要用来对修改后的文件做版本区分。
2. 文件指纹有哪几种？
1. Hash：和整个项⽬的构建相关，只要项⽬⽂件有修改，整个项⽬构建的 hash 值就会更改，一般用于图片设置；
2. Chunkhash：与 webpack 打包的 chunk 有关，不同的 entry 会⽣成不同的 chunkhash 值，一般用于设置JS文件；
3. Contenthash：根据⽂件内容来定义 hash ，⽂件内容不变，则 contenthash 不变，一般用于设置CSS文件；
3. JS的文件指纹设置；
'use strict';
const path = require('path');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
// 设置chunkhash，长度为8位
filename: '[name]_[chunkhash:8].js'
}
};4. CSS的文件指纹设置；
'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[chunkhash:8].js'
},
plugins: [
new MiniCssExtractPlugin({
// 设置CSS为contenthash，长度为8位
filename: '[name]_[contenthash:8].css'
})
]
};5. 图片的文件指纹设置；
图片文件的指纹设置使用file-loader，常用的占位符的含义如下：
图片的文件指纹设置如下：
'use strict';
const path = require('path');
// npm i mini-css-extract-plugin -D
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
index: './src/index.js',
search: './src/search.js'
},
output: {
path: path.join(__dirname, 'dist'),
// 设置JS的文件指纹为chunkhash，长度为8位
filename: '[name]_[chunkhash:8].js'
},
mode: 'production',
module: {
rules: [
{
test: /.js$/,
use: 'babel-loader'
},
{
test: /.css$/,
use: [
// 去掉style-loader，将CSS单独提取一个文件
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /.less$/,
use: [
// 去掉style-loader，将CSS单独提取一个文件
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
},
{
test: /.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'file-loader',
options: {
// 设置的图片指纹为hash，长度为8位
name: '[name]_[hash:8].[ext]'
}
}
]
},
{
test: /.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: 'file-loader',
options: {
// 设置字体的指纹为hash，长度为8位
name: '[name]_[hash:8][ext]'
}
}
]
}
]
},
plugins: [
// 将CSS提取出来一个文件
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css'
})
]
};本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2023-01-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录