Webpack中的文件指紋的實現(xiàn)
1. 什么是文件指紋?
文件指紋就是打包后輸出的文件名的后綴,主要用來對修改后的文件做版本區(qū)分。
2. 文件指紋有哪幾種?
1. Hash:和整個項目的構(gòu)建相關(guān),只要項目文件有修改,整個項目構(gòu)建的 hash 值就會更改,一般用于圖片設(shè)置;
2. Chunkhash:與 webpack 打包的 chunk 有關(guān),不同的 entry 會生成不同的 chunkhash 值,一般用于設(shè)置JS文件;
3. Contenthash:根據(jù)文件內(nèi)容來定義 hash ,文件內(nèi)容不變,則 contenthash 不變,一般用于設(shè)置CSS文件;
3. JS的文件指紋設(shè)置;
'use strict'; const path = require('path'); module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), // 設(shè)置chunkhash,長度為8位 filename: '[name]_[chunkhash:8].js' } };
4. CSS的文件指紋設(shè)置;
'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({ // 設(shè)置CSS為contenthash,長度為8位 filename: '[name]_[contenthash:8].css' }) ] };
5. 圖片的文件指紋設(shè)置;
圖片文件的指紋設(shè)置使用file-loader,常用的占位符的含義如下:
圖片的文件指紋設(shè)置如下:
'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'), // 設(shè)置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: { // 設(shè)置的圖片指紋為hash,長度為8位 name: '[name]_[hash:8].[ext]' } } ] }, { test: /.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { // 設(shè)置字體的指紋為hash,長度為8位 name: '[name]_[hash:8][ext]' } } ] } ] }, plugins: [ // 將CSS提取出來一個文件 new MiniCssExtractPlugin({ filename: '[name]_[contenthash:8].css' }) ] };
到此這篇關(guān)于Webpack中的文件指紋的實現(xiàn)的文章就介紹到這了,更多相關(guān)Webpack 文件指紋內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實現(xiàn)禁止高頻率連續(xù)點擊的方法【基于ES6語法】
這篇文章主要介紹了JS實現(xiàn)禁止高頻率連續(xù)點擊的方法,通過事件監(jiān)聽結(jié)合定時器實現(xiàn)針對高頻率點擊的限制操作,該功能基于ES6語法實現(xiàn),需要的朋友可以參考下2017-04-04JavaScript中判斷原生函數(shù)檢查function是否是原生代碼
檢查某個function是否是原生代碼,要檢測這一點,最簡單的辦法當(dāng)然是判斷函數(shù)的 toString 方法返回的值2014-09-09