html-webpack-plugin

来源:http://www.cnblogs.com/yingtoumao/archive/2017/11/29/7913625.html
-Advertisement-
Play Games

簡介: html-webpack-plugin 是一個webpack插件，它簡化了註入webpack打包文件的html的創建。當webpack打包文件使用哈希值作為文件名並且每次編譯的哈希值都不同時尤其有用。你可以使用lodash模板來創建html文件，也可以使用你自己的載入器。 安裝： 第三方插件 ...


簡介:

　　 html-webpack-plugin 是一個webpack插件，它簡化了註入webpack打包文件的html的創建。當webpack打包文件使用哈希值作為文件名並且每次編譯的哈希值都不同時尤其有用。你可以使用lodash模板來創建html文件，也可以使用你自己的載入器。

安裝：

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

第三方插件：

    html-webpack-plugin 通過提供鉤子（參考下麵的事件）來擴展你的需求。可以通過零配置來集成下麵這些非常有用的插件：

基本用法：

    插件生成一個在 <body> 內使用 <script> 標簽引入所有 webpack 打包文件的html5文件。

    像下麵這樣將插件添加到 webpack 配置文件中：

 1  var HtmlWebpackPlugin = require('html-webpack-plugin');
 2 
 3     var webpackConfig = {
 4 
 5         entry: 'index.js',
 6 
 7         output: {
 8 
 9             path: __dirname _ './dist',
10 
11             filename: 'index_bundle.js'
12 
13         },
14 
15         plugins: [new HtmlWebpackPlugin()]
16 
17     };

    這將會在項目根目錄下的 dist 文件夾中生成一個包含如下內容的 index.html 文件：

 1 <!DOCTYPE html>
 2  <html>
 3    <head>
 4      <meta charset="UTF-8">
 5      <title>Webpack App</title>
 6    </head>
 7    <body>
 8      <script src="index_bundle.js"></script>
 9    </body>
10  </html>

    如果有多個入口點，所有的打包文件都會被 <script> 標簽引入到生成的html文件中。

    如果 webpack 輸出了 CSS 資源（例如：使用 ExtractTextPlugin 產出的CSS文件），這些CSS文件會被 <link> 標簽引入到html的 <head> 中。

配置：

    你可以通過一個散列對象來配置 HtmlWebpackPlugin。可配置的屬性如下：

  •     title: 設置生成的html文件的<title>值
  •     filename: 設置生成的html文件名，預設是 index.html 。你也可以在這設置子文件夾路徑（例如： assets/admin.html）
  •     template: 設置模板載入器

        1. 不設置任何載入器

            預設（如果你不使用任何載入器）使用 fallback lodash loader:

{
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}

            註意，使用 .html 擴展名可能會意外的出發其他載入器。

        2. 直接設置模板載入器

new HtmlWebpackPlugin({
  // For details on `!!` see https://webpack.github.io/docs/loaders.html#loader-order
  template: '!!handlebars!src/index.hbs'
})

        3. 使用 module.loders 設置載入器

{
  module: {
    loaders: [
      {
        test: /\.hbs$/,
        loader: 'handlebars-loader'
      },
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.hbs'
    })
  ]
}

            下麵的例子中，webpack將對模板使用 html-loader。這將會壓縮html，並且禁用 ejs 載入器。

{
  module: {
    loaders: [
      {
        test: /\.html$/,
        loader: 'html-loader'
      }],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
}
  •     inject: true | 'head' | 'body' | false 

        將所有資源註入到 template 或 templateContent 中。 如果設置為 true 或 'body' 所有的javascript資源將會註入到body元素的底部。

        如果設置為 'head' 則會把javascript資源註入到head元素中。

  •     favicon: 設置將被添加到html中的圖標路徑。
  •     minify: {...} | false

        通過設置 html-minifier 屬性來壓縮生成的html。

  •     hash: true | false

        如果為true，會給html中所有的javascript和css文件添加一個唯一的哈希值。這對清除緩存非常有用。

  •     cache: true | false

        預設為true，只有當文件該變時才會觸發編譯

  •     showErrors: true | false

        預設為true，錯誤的詳細信息將會被寫入到html頁面中。

  •     chunks: 設置允許添加的模塊（例如： 只允許添加 unit-test 模塊）
  •     chunksSortMode: 'none' | 'auto' | 'dependency' | 'manual' | {function}  預設為 'auto'

        設置模塊添加到html中的順序

  •     excludeChunks: 設置忽略某些模塊（例如： 不添加 unit-test 模塊）
  •     xhtml: true | false 

        預設為false，如果為true，將 <link> 標簽渲染為自關閉，相容 XHTML。

 

    下麵是一個如何使用這些屬性的 webpack 配置示例：

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

生成多個html文件：

    如果需要生成多個html文件，只需要在插件數組中多次創建 HtmlWebpackPlugin 對象即可：

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

編寫你自己的模板：

    如果預設生成的html不能滿足你的需求，你可以自己編寫模板。最簡單的方式是配置 template 選項並傳遞一個自定義的html文件。

    html-webpack-plugin會自動將所有必要的CSS，JS，manifest 和 favicon 文件註入到標記中。例如：

     webpack.config.js : 

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    template: 'my-index.html', // Load a custom template (lodash by default see the FAQ for details)
  })
]

    my-index.html : 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

    如果你已經設置了一個載入器，你可以使用這個載入器來解析模板。

    請註意，如果您指定了html-loader並使用.html文件作為模板，也會發生這種情況。

module: {
  loaders: [
    { test: /\.hbs$/, loader: "handlebars" }
  ]
},
plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template using Handlebars',
    template: 'my-index.hbs'
  })
]

    如果 inject 特性不能滿足你的需求而且你想自主控制資源註入的位置，那麼你可以使用 html-webpack-template 項目

    的預設模板（default template）作為起點來編寫你自己的模板。

   

    你可以在模板中使用以下變數：

         htmlWebpackPlugin : 特定於此插件的數據

             htmlWebpackPlugin.files : webpack 的 stats 對象的 assetsByChunkName 屬性的竄改表示，包含了從入口點名稱到包文件名的映射。例如： 

"htmlWebpackPlugin": {
  "files": {
    "css": [ "main.css" ],
    "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
    "chunks": {
      "head": {
        "entry": "assets/head_bundle.js",
        "css": [ "main.css" ]
      },
      "main": {
        "entry": "assets/main_bundle.js",
        "css": []
      },
    }
  }
}

            如果你已經在你的webpack配置文件中設置了一個publicPath，這個資源哈希值將被正確地反映出來。

             htmlWebpackPlugin.options : 傳遞給插件的選項散列。除了這個插件實際使用的選項之外，你可以使用這個散列將任意數據傳遞給你的模板。

         webpack : webpack stats 對象。註意，這個stats對象存在於HTML模板發出的時候，因此可能不包含webpack運行完成後的stats的全部信息。

         webpackConfig : 用於此編譯的webpack配置。這可以用來獲取 publicPath（例如：webpackConfig.output.publicPath）

過濾模塊：

    設置只包含指定的模塊：

plugins: [
  new HtmlWebpackPlugin({
    chunks: ['app']
  })
]

    通過設置 excludeChunks 選項，排除指定的模塊：

plugins: [
  new HtmlWebpackPlugin({
    excludeChunks: ['dev-helper']
  })
]

事件：

    通過執行下列事件來允許其他插件更改html：

    非同步事件：

  •    html-webpack-plugin-before-html-generation
  •    html-webpack-plugin-before-html-processing
  •    html-webpack-plugin-alter-asset-tags
  •    html-webpack-plugin-after-html-processing
  •    html-webpack-plugin-after-emit

    同步事件：

  •    html-webpack-plugin-alter-chunks

    實現示例： html-webpack-harddisk-plugin

    用法示例：

// MyPlugin.js
function MyPlugin(options) {
  // Configure your plugin with options...
}
MyPlugin.prototype.apply = function(compiler) {
  // ...
  compiler.plugin('compilation', function(compilation) {
    console.log('The compiler is starting a new compilation...');
    compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
      htmlPluginData.html += 'The magic footer';
      callback(null, htmlPluginData);
    });
  });
};
module.exports = MyPlugin;

    然後 webpack.config.js 中配置為：

plugins: [
  new MyPlugin({options: ''})
]

    註意，回調必須通過htmlPluginData傳遞給其他插件，監聽相同的html-webpack-plugin-before-html-processing事件。

 

本文翻譯自 html-webpack-plugin , 英語水平有限, 翻譯不當之處, 敬請指正.


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • centos6.5 yum安裝redis
    1.yum添加epel源 vim /etc/redis.conf 找到redis.conf 並修改 daemonize no（第128行） 為 daemonize yes :set number(顯示行號) . 4.開啟客戶端要確保服務端啟動 redis-server /etc/redis.conf ...
  • 開始學習Linux
    有誰跟我一樣是Linux的初學者麽，接下來的時間學習Linux，希望找到個一同學習的，互相監督，共同進步！！！！！！ ...
  • 最簡單的DHCP服務
    這幾天在準備網路安裝linux操作系統。最後決定用pxe + kickstart 的方式完成。原理、方案弄完了之後，開始搭建，結果被DHCP給擋住了。這不就得研究研究最簡單最實用的DHCP使用方法。 * 紅色的是必須有 * 綠色的是要註意 * 藍色的是包安裝時，要有的程式包 1. DHCP的實現 2 ...
  • 企業級應用TOMCAT
    第1章 Tomcat 1.1 Tomcat簡介 Tomcat是一個免開放源代碼的Web應用伺服器，屬於輕量級應用伺服器，在中小型系統和併發訪問用戶不多的場合下被普遍使用，是開發調試JSP程式的首選，另外它還是Servlet和JSP容器，獨立的Servlet容器是Tomcat的預設模式 其類似Ngin ...
  • Unbuntu16.04安裝搜狗拼音輸入法
    為了讓自己的電腦相對安全一些，我安裝了ubuntu的物理機 因為要經常輸入漢字，我就在unbuntu裡面安裝了搜狗輸入法 1.在搜狗輸入法官網下載Linux版本的安裝包：http://pinyin.sogou.com/linux/，記住下載自己機子對應的版本（看清楚是32位還是64位） 2.找到文件 ...
  • 項目詳解4—haproxy 詳解
    一、企業服務架構圖及負載均衡的要求 1、場景說明 在企業生產環境中，每天會有很多的需求變更，比如增加伺服器、新業務上線、url路由修改、功能變數名稱配置等等，對於前端負載均衡設備來說，容易維護，複雜度低，是首選指標。在企業中，穩定壓倒一切，與其搞得很複雜，經常出問題，不如做的簡單和穩定。 在企業中，90%以 ...
  • C#學習筆記-迭代器模式
    什麼是迭代器模式？ 迭代器模式（Iterator）：提供一種方法順序訪問一個聚合對象中各個元素，而又不暴露該對象的內部表示。 何時使用迭代器模式？ 當需要訪問一個聚合對象，而且不管這些對象是什麼都需要遍歷的時候，需要考慮使用迭代器模式。 迭代器模式的組成 Iterator：迭代器抽象類，用於定義得到 ...
  • 需加裝飾——裝飾模式
    裝飾模式指的是在不必改變原類文件和使用繼承的情況下，動態地擴展一個對象的功能。它是通過創建一個包裝對象，也就是裝飾來包裹真實的對象。 類圖分析 我們先假設一個業務場景，有三種房子需要裝修，分別是公寓，木屋和別墅，裝修的方式有刷牆和擺滿鮮花。那麼應用裝飾模式以後的類圖結構如下所示： 這個結構似乎與 " ...
一周排行
    -Advertisement-
    Play Games
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類