快捷導(dǎo)航

詳解webpack自動(dòng)生成html頁面

更新時(shí)間：2017年06月29日 11:48:43 作者：元慶

本篇文章主要介紹了詳解webpack自動(dòng)生成頁面，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

在項(xiàng)目中我們會(huì)不斷的添加，優(yōu)化代碼，每次添加優(yōu)化之后都需要打包進(jìn)行再次上傳更新。這時(shí)問題就回來了，每次打包出來js,css文件的名字都是一樣的，在首頁index.html的引用也不會(huì)變，這樣老用戶在訪問這個(gè)頁面時(shí)看到就會(huì)是瀏覽器緩存的版本，而不是最新的版本，想要看到最新版本還要進(jìn)行清緩存，強(qiáng)制刷新，這顯然是不可能的，那我們要如何解決這個(gè)問題呢？

首先有同學(xué)可能想到每次打包之后我改一下打包出來文件的名字，然后在首頁index,html里面把引用代碼里的文件名字也改掉就可以了，這種方法是可以的，但是每次都要改這么多，顯然會(huì)很耗費(fèi)時(shí)間，而且人工手動(dòng)修改很可能也會(huì)帶來bug。又有一位同學(xué)可能會(huì)說，不用那么麻煩，直接在上線前,在css,js資源引用的后面加一個(gè)隨機(jī)數(shù)就可以了。這種方法雖然比第一種方法簡單了許多，但是還是沒有解決之前的問題。那么我們能不能實(shí)現(xiàn)每次打包完直接生成的文件后面加上一個(gè)隨機(jī)字符串，然后首頁里的引用也一起自動(dòng)變成最新打包的文件呢？答案是可以的，接下來我將講一下利用webpack實(shí)現(xiàn)

webpack實(shí)現(xiàn)這個(gè)功能，首先要下載一個(gè)webpack的插件html-webpack-plugin

npm install html-webpack-plugin

接下來要在羨慕里新建一個(gè)文件，這個(gè)文件就是我們要生成的首頁文件的模板

//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" style="height:100%"></div>
  <!--<div>development mode</div>-->
  </body>
  </html>`
 )
}

準(zhǔn)備工作做好了，接下來就是進(jìn)行配置了

//首先引入插件
var HtmlWebpackPlugin = require('html-webpack-plugin');

界限來在配置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)營后臺(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)獲取最新資源了。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。