用HtmlWebpackPlugin解決靜態指令碼更新之後的快取問題

白色風車發表於2017-04-24
原文網址 : http://www.ituring.com.cn/article/274881
HTMLWebPlugin指令碼快取

HtmlWebpackPlugin

問題背景

目前公司一部分H5專案是通過打包成靜態資源然後上傳到伺服器的形式存在的， 那麼在平時的需求修改或者bug修復之後，往往需要使用者清理快取之後才能生效， 否則會使用之前快取下來的指令碼。由於之前這部分工作量看起來不大， 所以就手動修改script標籤，加一個沒有實際含義的引數，比如？v=0.0.0， 最近發現實在是不能忍受了，那就來試一試HtmlWebpackPlugin吧！

Intro

HtmlWebpackPlugin讓我們更容易地建立一個html檔案去自動引用webpack的打包結果。 當我們的打包檔案包含一個隨著打包過程不斷變換的hash字串的時候，這個功能顯得更加好用。 我們可以讓這個外掛生成一個html檔案，也可以通過lodash templates來使用自己的模板， 如果願意的話，也能使用自己的loader。

安裝

npm install --save-dev html-webpack-plugin

基本用法

這個外掛會生成一個html5檔案， 該檔案會通過script標籤將webpack打包生成的所有檔案引入。 只需要將這個外掛新增到你的webpack配置中就可以了。如下所示：

var HtmlWebpackPlugin = require( 'html-webpack-plugin' );

var webpackConfig = {
  entry : 'index.js',
  output : {
    path : 'dist',
    filename : 'index_bundle.js'
  },
  plugins : [ new HtmlWebpackPlugin() ]
};

這會生成一個包含如下內容的檔案：

<!doctype html> <html> <head> <meta charset="utf-8"> <title>webpack App</title> </head> <body> <script src="index_bundle.js"></script> </body> </html>

如果你有多個webpack入口檔案，它們都會被引入到這個檔案中。

如果你還有一些用webpack打包生成的css檔案， 它們也會通過link標籤被引用到這個檔案中。

常用的一些配置項

  • title : 生成的html檔案的標題
  • filename : 生成的html檔案的名字，可以生成子目錄，比如assets/admin.html
  • hash : true | false ，當值為true時， 會在包含的指令碼和css檔名後面加一個唯一的hash，這對清除快取很有幫助。
  • template : 用來生成html的模版檔案，它的值是一個相對於webpack.config.js的路徑。

注意 ： 如果在webpack.config.js中設定了output的path屬性， 那麼filename是相對於這個path計算的，否則是相對於webpack.config.js計算的。 當指明瞭template的時候，title屬性的值將會被忽略。

{
  entry : 'index.js',
  output : {
    path : 'dist',
    filename : 'index_bundle.js'
  },
  plugins : [
    new HtmlWebpackPlugin( {
      title : 'My App',
      filename : 'assets/admin.html'
    } )
  ]
}

相關文章