在項目中我們會不斷的添加，優化代碼，每次添加優化之后都需要打包進行再次上傳更新。這時問題就回來了，每次打包出來js,css文件的名字都是一樣的，在首頁index.html的引用也不會變，這樣老用戶在訪問這個頁面時看到就會是瀏覽器緩存的版本，而不是最新的版本，想要看到最新版本還要進行清緩存，強制刷新，這顯然是不可能的，那我們要如何解決這個問題呢？
首先有同學可能想到每次打包之后我改一下打包出來文件的名字，然后在首頁index,html里面把引用代碼里的文件名字也改掉就可以了，這種方法是可以的，但是每次都要改這么多，顯然會很耗費時間，而且人工手動修改很可能也會帶來bug。又有一位同學可能會說，不用那么麻煩，直接在上線前,在css,js資源引用的后面加一個隨機數就可以了。這種方法雖然比第一種方法簡單了許多，但是還是沒有解決之前的問題。那么我們能不能實現每次打包完直接生成的文件后面加上一個隨機字符串，然后首頁里的引用也一起自動變成最新打包的文件呢？答案是可以的，接下來我將講一下利用webpack實現
webpack實現這個功能，首先要下載一個webpack的插件html-webpack-plugin
npm install html-webpack-plugin
接下來要在羨慕里新建一個文件，這個文件就是我們要生成的首頁文件的模板
//template.jsmodule.exports = function (templateParams) { return ( `<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> ${templateParams.htmlWebpackPlugin.options.title} </title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> <meta name="author" content=""/> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="HandheldFriendly" content="true"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="Cache-Control" content="no-transform"> <meta http-equiv="Cache-Control" content="no-siteapp"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <!--other: default, black, black-translucent--> <meta name="format-detection" content="telephone=no"> </head> <script> function hasToken() { var result = /ztoken/g.test(document.cookie) && !(document.cookie.split('ztoken=')[1].split(';')[0] === ''); return result } function clearCookieAll() { var keys = document.cookie.match(/[^ =;]+(?=/=)/g); if (keys) { for (var i = keys.length; i--;) document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString() } } if (!hasToken()) { console.warn('無效token') clearCookieAll() window.location.href = '/index.html' } </script> <body> <div id="root" style="height:100%"></div> <!--<div>development mode</div>--> </body> </html>` )}準備工作做好了，接下來就是進行配置了
//首先引入插件var HtmlWebpackPlugin = require('html-webpack-plugin');界限來在配置webpack的plugins選項
plugins: [ new HtmlWebpackPlugin({ //根據模板插入css/js等生成最終HTML // favicon:'./src/img/favicon.ico', //favicon路徑 filename:'src/index.html', //生成的html存放路徑，相對于 path template:'./src/app/template/template.js', //html模板路徑 title: '升級空間運營后臺', cache: true, inject:true, //允許插件修改哪些內容，包括head與body hash:true, //為靜態資源生成hash值 minify:{ //壓縮HTML文件 removeComments:true, //移除HTML中的注釋 collapseWhitespace:false //刪除空白符與換行符 } })],執行打包命令后，你會發現生成自動生了HTML代碼，在index,html資源引用的地方會在資源后面自動生成一串hash值，這樣每次更新之后用戶就會自動獲取最新資源了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
