溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“webpack如何自動生成html頁面”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“webpack如何自動生成html頁面”這篇文章吧。
在項目中我們會不斷的添加，優(yōu)化代碼，每次添加優(yōu)化之后都需要打包進行再次上傳更新。這時問題就回來了，每次打包出來js,css文件的名字都是一樣的，在首頁index.html的引用也不會變，這樣老用戶在訪問這個頁面時看到就會是瀏覽器緩存的版本，而不是最新的版本，想要看到最新版本還要進行清緩存，強制刷新，這顯然是不可能的，那我們要如何解決這個問題呢？
首先有同學可能想到每次打包之后我改一下打包出來文件的名字，然后在首頁index,html里面把引用代碼里的文件名字也改掉就可以了，這種方法是可以的，但是每次都要改這么多，顯然會很耗費時間，而且人工手動修改很可能也會帶來bug。又有一位同學可能會說，不用那么麻煩，直接在上線前,在css,js資源引用的后面加一個隨機數(shù)就可以了。這種方法雖然比第一種方法簡單了許多，但是還是沒有解決之前的問題。那么我們能不能實現(xiàn)每次打包完直接生成的文件后面加上一個隨機字符串，然后首頁里的引用也一起自動變成最新打包的文件呢？答案是可以的，接下來我將講一下利用webpack實現(xiàn)
webpack實現(xiàn)這個功能，首先要下載一個webpack的插件html-webpack-plugin
npm install html-webpack-plugin
接下來要在羨慕里新建一個文件，這個文件就是我們要生成的首頁文件的模板
//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('無效token')
clearCookieAll()
window.location.href = '/index.html'
}
</script>
<body>
<div id="root" ></div>
<!--<div>development mode</div>-->
</body>
</html>`
)
}準備工作做好了，接下來就是進行配置了
//首先引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');界限來在配置webpack的plugins選項
plugins: [
new HtmlWebpackPlugin({ //根據(jù)模板插入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, //為靜態(tài)資源生成hash值
minify:{ //壓縮HTML文件
removeComments:true, //移除HTML中的注釋
collapseWhitespace:false //刪除空白符與換行符
}
})
],執(zhí)行打包命令后，你會發(fā)現(xiàn)生成自動生了HTML代碼，在index,html資源引用的地方會在資源后面自動生成一串hash值，這樣每次更新之后用戶就會自動獲取最新資源了。
以上是“webpack如何自動生成html頁面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經查實，將立刻刪除涉嫌侵權內容。
