溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“webpack如何自動生成html頁面”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“webpack如何自動生成html頁面”這篇文章吧。
在項目中我們會不斷的添加，優化代碼，每次添加優化之后都需要打包進行再次上傳更新。這時問題就回來了，每次打包出來js,css文件的名字都是一樣的，在首頁index.html的引用也不會變，這樣老用戶在訪問這個頁面時看到就會是瀏覽器緩存的版本，而不是最新的版本，想要看到最新版本還要進行清緩存，強制刷新，這顯然是不可能的，那我們要如何解決這個問題呢？
首先有同學可能想到每次打包之后我改一下打包出來文件的名字，然后在首頁index,html里面把引用代碼里的文件名字也改掉就可以了，這種方法是可以的，但是每次都要改這么多，顯然會很耗費時間，而且人工手動修改很可能也會帶來bug。又有一位同學可能會說，不用那么麻煩，直接在上線前,在css,js資源引用的后面加一個隨機數就可以了。這種方法雖然比第一種方法簡單了許多，但是還是沒有解決之前的問題。那么我們能不能實現每次打包完直接生成的文件后面加上一個隨機字符串，然后首頁里的引用也一起自動變成最新打包的文件呢？答案是可以的，接下來我將講一下利用webpack實現
webpack實現這個功能，首先要下載一個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({ //根據模板插入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值，這樣每次更新之后用戶就會自動獲取最新資源了。
以上是“webpack如何自動生成html頁面”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
