Webpack中的文件指纹的实现
aiguangyuan 人气:01. 什么是文件指纹?
文件指纹就是打包后输出的文件名的后缀,主要用来对修改后的文件做版本区分。
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' }) ] };
加载全部内容