javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > Webpack文件指纹

一文入门Webpack文件指纹

作者:IT人.阿标

文件指纹是文件打包后输出的文件名的后缀,通常用来做一些文件的版本管理,文中给大家提到了几种文件指纹的设置用法,对Webpack文件指纹相关知识感兴趣的朋友一起看看吧

什么是文件指纹

文件指纹是文件打包后输出的文件名的后缀,通常用来做一些文件的版本管理

文件指纹的作用

文件指纹策略

和整个项目的构建相关,只要项目文件有修改,整个项目构建的hash值就会更改,并且全部文件都共用相同的hash值

和webpack打包的chunk有关,不同的entyr会生成不同的Chunkhash值(一个页面的值改变了并不会影响另一个页面,js文件一般采用此方法),chunkhash和hash不一样,它根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值。我们在生产环境里把一些公共库和程序入口文件区分开,单独打包构建,接着我们采用chunkhash的方式生成哈希值,那么只要我们不改动公共库的代码,就可以保证其哈希值不会受影响。

根据文件内容来定义hash,文件内容不变,则contenthash不变(css文件一般采用此方法)。

比如文件index.css被index.js引用了,所以共用相同的chunkhash值。但是这样子有个问题,如果index.js更改了代码,css文件就算内容没有任何改变,由于是该模块发生了改变,导致css文件会重复构建。
这个时候,我们可以使用extra-text-webpack-plugin里的contenthash值,保证即使css文件所处的模块里就算其他文件内容改变,只要css文件内容不变,那么不会重复构建。

hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值。如果文件内容改变的话,那么对应文件哈希值也会改变,对应的HTML引用的URL地址也会改变,触发CDN服务器从源服务器上拉取对应数据,进而更新本地缓存。但是在实际使用的时候,这几种hash计算还是有一定区别。

占位符介绍

占位符名称定义
[ext]资源后缀名
[name]文件名称
[path]文件的相对路径
[folder]文件所在的文件夹
[contenthash]文件的内容hash,默认是md5生成
[hash]文件的内容hash,默认是md5生成
[emoji]一个随机的指代文件内容的emoji

文件指纹的设置

根据不同的文件类型一般选择不同的文件指纹策略,通常情况下:

下面我们来介绍下几种用法

JS文件指纹设置

设置outputfilename,使用[chunkhash]chunkhash没办法和热更新一起使用的,不能与HotModuleReplacementPlugin这个插件一起使用,所以我们只在生产环境写。

output: {                               //打包输出文件
        path: path.join(__dirname, 'dist'),
        filename: '[name]_[chunkhash:8].js'	//chunkhash指纹策略,截取前面8个字符
    }

图片文件指纹设置

设置file-loadername,使用[hash]

module: {
        rules: [
            {
                test: /.(png|jpg|gif|jpeg)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[name]_[hash:8].[ext]',
                        limit: 10240 //不超过10K时,将其转化为base64
                    }
                }
            },
    },

CSS文件指纹设置

CSS文件指纹策略比较特殊,我们需要用到MiniCssExtractPlugin,设置MiniCssExtractPluginfilename,使用[contenthash]

正常情况下,如果我们使用了style-loadercss-loader的话,那么这个css会由style-loadercss插入到style里面,并且放到head头部,此时并没有一个独立的css文件,因此,我们通常会采用MiniCssExtractPlugin,通过这个插件把这个style-loadercss提取成一个独立的文件,所以,对于这个css的文件指纹,我们会设置在这个MiniCssExtractPlugin里面,给它设置一个filename,并且给它设置一个[contenthash]

注意:MiniCssExtractPlugin这个插件没办法与style-loader一起使用,因为它们之间的功能是互斥的,所以需要将style-loader换成MiniCssExtractPlugin.loader

设置步骤

首先安装MiniCssExtractPlugin

npm i -D mini-css-extract-plugin

配置webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
......
module.exports = {
        plugins: [
        new MiniCssExtractPlugin({
            filename: '[name][contenthash:8].css'
        })
    ],
}

文件指纹项目应用

webpack.config.js文件更名为webpack.dev.js并将内部的mode修改为development,再复制一份文件,更名为webpack.prod.jsmode修改为production

然后需要修改配置文件package.json区分production和development

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "watch": "webpack --watch --progress",
    "dev": "webpack-dev-server -config webpack.dev.js --open"
  }

完成上述步骤,我们在项目中就可以根据生产环境和开发环境不同,配置不同的文件指纹。

到此这篇关于一文入门Webpack文件指纹的文章就介绍到这了,更多相关Webpack文件指纹内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文