在項目中我們會不斷的添加，優化代碼，每次添加優化之后都需要打包進行再次上傳更新。這時問題就回來了，每次打包出來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>` )}
新聞熱點
疑難解答
圖片精選
