>[success] # 文件指纹 ~~~ 1.在前端发布体系中,为了实现增量发布,我们一般都会对静态资源加上md5的文件后 缀,保证每次发布的文件都没有缓存,同时对于未修改文件,不会受发布的影响,最大程 度利用缓存。 2.简单的来说'文件指纹'的应用场景是在项目打包时候使用的也就是上线,当我们在项目 开发阶段是用不到的 ~~~ >[info] ## 使用文件指纹 ~~~ 1.上面分析后文件指纹的场景不在开发环境,因此我们需要创建一个生产环境的配置 1.1.在根目录创建一个'webpack.prod.js' 1.2.增加一个打包指令在package.json里面增加一个指令(关于指令可以看基础用法章节) '"build": "webpack --config webpack.prod.js"' 2.对一些哈希基础值描述: 2.1.'hash':整个项目的构建相关,当有文件修改,整个项目构建的hash值就会更新。 2.2.'chunkhash':和webpack打包的chunk相关,不同的entry会生成不同的 chunkhash,一般用于js的打包。 2.3.'contenthash':根据文件内容来定义hash,文件内容不变,contenthash不变。例如 css的打包,由于 修改js或html文件,但是没有修改引入的css样式时,文件不需要生 成新的哈希值,所以可适用于css的打包。 简单的总结一下: // 项目级别,有任一地方改动 则哈希值都会发生变化 // filename: '[name]-[hash].bundle.css' // 同一路打包的文件 hash值都是相同的 控制更精确 // filename: '[name]-[chunkhash].bundle.css' // 根据输出文件的内容生成的hash值 解决缓存问题的 -- '最好方式' // 可以在哈希末尾配置哈希值的长度 // filename: '[name]-[contenthash:8].bundle.css' ~~~ * 打包后的效果 ![](https://img.kancloud.cn/19/84/198472137683fa1be7168fe63fc8009c_220x97.png) >[danger] ##### JS文件指纹设置:chunkhash ~~~ module.export = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.resolve(__dirname,'dist'), filename: '[name][chunkhash:8].js' }, } ~~~ >[danger] ##### CSS文件指纹:contenthash --( min-css-extract-plugin 可以生产css文件) ~~~ 1.直接使用'style-loader'方式通过style标签将CSS插入到head中并没有生成单独的CSS文件,因此也不存在 使用指纹时候可以更新文件,所以这里通过'min-css-extract-plugin'插件将CSS提取成单独的CSS文件,并添加文件指纹。 2.安装依赖mini-css-extract-plugin -- 'npm i mini-css-extract-plugin -D' ~~~ ~~~ const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.export = { module: { rules: [ { test:/\.css$/, use: [ MiniCssExtractPlugin.loader, 'css-loader', ] }, ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name][contenthash:8].css' }) ] } ~~~ >[danger] ##### 图片文件指纹设置:hash ~~~ 1.其中,hash对应的是文件内容的哈希值,默认为md5生成,不同于前面所说的hash值。 ~~~ ~~~ module.export = { module:{ rules: [ { test: /\.(png|svg|jpg|jpeg|gif)$/, use: [{ loader:'file-loader', options: { name: 'img/[name][hash:8].[ext]' } }], } ] } } ~~~ >[danger] ##### 整体配置 ~~~ const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin') module.exports = { entry: { index: './src/index.js', sreach: './src/hellowWebpack.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name][chunkhash:8].js' }, // 注意在这里配置的loader module: { rules: [{ test: /\.js$/, use: 'babel-loader' }, { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] // css 解析配置 }] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name][contenthash:8].css' }) ] } ~~~ >[danger] ##### 问答 ~~~ 1.关于 [name] 那些参数具体解释? 答: https://webpack.js.org/configuration/output/#template-strings 2.使用了md5指纹之后发现每次打包还是会发生变化? 答:这是由于webpack的处理机制导致的,webpack每次打包会把每个模块的配置信息 如文件名、文件顺序、文件md5等信息作为配置打入js中,以便于其进行模块管理,而这 部内容,每次打包都有可能发生变化,导致整个js文件名每次都会发生变化。 webpack提供了一个 manifest 的机制来剥出这个配置文件。我们需要使用 CommonsChunkPlugin 来将其剥离,同时使用 chunk-manifest-webpack-plugin 读取其 内容导出另外一个文件,防止其内容变化导致整个js文件指纹发生变化 ~~~ [CommonsChunkPlugin 这次没自己读后续仔细看看](https://segmentfault.com/a/1190000012828879?utm_source=tag-newest)