Webpack中的文件指纹

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'})]
};

Webpack中的文件指纹相关推荐

Webpack文件指纹
文章目录什么是文件指纹文件指纹的作用文件指纹策略占位符介绍文件指纹的设置 JS文件指纹设置图片文件指纹设置 CSS文件指纹设置设置步骤文件指纹项目应用什么是文件指纹文件指纹是文件打 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
java配置文件中的plugin,启用ContextReplacementPlugin以忽略webpack中的配置和测试设置文件...
我正在开发一个项目,其中我的文件夹结构如下 lib apps src / index.js(webpack的入口文件)jestEnvSetup.js webpack.config.js package ...
webpack打包生成的map文件_一站式搞明白webpack中的代码分割
上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢 ...
vue文件里在style的样式需要什么loader_Vue学习笔记之Webpack中css、less、图片等文件处理...
一.webpack中使用css文件: loader是webpack中一个非常核心的概念,去转化webpack不能转化或打包的文件. 安装loader: 官网介绍: 安装: cnpm install - ...
html字体库otf文件使用,在webpack中加载.otf字体文件的正确方法是什么？
使用webpack时加载.otf字体文件的适当方式是什么?我曾多次尝试包括在我的webpack.config.js的规则,没有任何成功的基础上,很多例子我大致如下的线路看出:对于在webpack中加载 ...
webpack中hash、chunkhash、contenthash
文件指纹是指打包后输出的文件名和后缀. hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容改变的话,那么对应文件哈希值也会改变,对应的H ...
express给html设置缓存,webpack + express 实现文件精确缓存
由于最近开发的个人博客(Vue + node)在使用过程中,发现网络加载有点慢,所以打算对它进行一次优化.本次优化的目标如下: index.html 设置成 no-cache,这样每次请求的时候都会比 ...