詳解webpack自動(dòng)生成html頁(yè)面
在項(xiàng)目中我們會(huì)不斷的添加，優(yōu)化代碼，每次添加優(yōu)化之后都需要打包進(jìn)行再次上傳更新。這時(shí)問(wèn)題就回來(lái)了，每次打包出來(lái)js,css文件的名字都是一樣的，在首頁(yè)index.html的引用也不會(huì)變，這樣老用戶在訪問(wèn)這個(gè)頁(yè)面時(shí)看到就會(huì)是瀏覽器緩存的版本，而不是最新的版本，想要看到最新版本還要進(jìn)行清緩存，強(qiáng)制刷新，這顯然是不可能的，那我們要如何解決這個(gè)問(wèn)題呢？
首先有同學(xué)可能想到每次打包之后我改一下打包出來(lái)文件的名字，然后在首頁(yè)index,html里面把引用代碼里的文件名字也改掉就可以了，這種方法是可以的，但是每次都要改這么多，顯然會(huì)很耗費(fèi)時(shí)間，而且人工手動(dòng)修改很可能也會(huì)帶來(lái)bug。又有一位同學(xué)可能會(huì)說(shuō)，不用那么麻煩，直接在上線前,在css,js資源引用的后面加一個(gè)隨機(jī)數(shù)就可以了。這種方法雖然比第一種方法簡(jiǎn)單了許多，但是還是沒(méi)有解決之前的問(wèn)題。那么我們能不能實(shí)現(xiàn)每次打包完直接生成的文件后面加上一個(gè)隨機(jī)字符串，然后首頁(yè)里的引用也一起自動(dòng)變成最新打包的文件呢？答案是可以的，接下來(lái)我將講一下利用webpack實(shí)現(xiàn)
webpack實(shí)現(xiàn)這個(gè)功能，首先要下載一個(gè)webpack的插件html-webpack-plugin
npm install html-webpack-plugin
接下來(lái)要在羨慕里新建一個(gè)文件，這個(gè)文件就是我們要生成的首頁(yè)文件的模板
//template.js
module.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('無(wú)效token')
clearCookieAll()
window.location.href = '/index.html'
}
</script>
<body>
<div id="root" style="height:100%"></div>
<!--<div>development mode</div>-->
</body>
</html>`
)
}
準(zhǔn)備工作做好了，接下來(lái)就是進(jìn)行配置了
//首先引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');
界限來(lái)在配置webpack的plugins選項(xiàng)
plugins: [
new HtmlWebpackPlugin({ //根據(jù)模板插入css/js等生成最終HTML
// favicon:'./src/img/favicon.ico', //favicon路徑
filename:'src/index.html', //生成的html存放路徑，相對(duì)于 path
template:'./src/app/template/template.js', //html模板路徑
title: '升級(jí)空間運(yùn)營(yíng)后臺(tái)',
cache: true,
inject:true, //允許插件修改哪些內(nèi)容，包括head與body
hash:true, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:true, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
})
],
執(zhí)行打包命令后，你會(huì)發(fā)現(xiàn)生成自動(dòng)生了HTML代碼，在index,html資源引用的地方會(huì)在資源后面自動(dòng)生成一串hash值，這樣每次更新之后用戶就會(huì)自動(dòng)獲取最新資源了。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
本篇文章主要是對(duì)JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要介紹了JavaScript對(duì)象原型鏈原理解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法
今天小編就為大家分享一篇layui之?dāng)?shù)據(jù)表格--與后臺(tái)交互獲取數(shù)據(jù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
當(dāng)然隨著HTML5的普及，web DB 已經(jīng)是大勢(shì)所趨了2010-05-05
基于Cesium實(shí)現(xiàn)拖拽3D模型的示例代碼
Bootstrap警告（Alerts）的實(shí)現(xiàn)方法
Js類的靜態(tài)方法與實(shí)例方法區(qū)分及jQuery拓展的兩種方法
document.getElementById為空或不是對(duì)象的解決方法