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
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類