溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“webpack怎么自動生成html頁面”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“webpack怎么自動生成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頁面”的內容了，經過本文的學習后，相信大家對webpack怎么自動生成html頁面這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
