>[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' ~~~ * 打包后的效果  >[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)