>[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)