使用webpack外掛html-webpack-plugin實例詳解-js教程-PHP中文網

首頁

web前端

js教程

使用webpack外掛html-webpack-plugin實例詳解

php中世界最好的语言

May 25, 2018 pm 03:22 PM

web webpack

這次帶給大家使用webpack外掛html-webpack-plugin實例詳解，使用webpack外掛html-webpack-plugin的注意事項有哪些，以下就是實戰案例，一起來看一下。

這個外掛程式用來簡化建立服務 webpack bundle 的 HTML 文件，尤其是對於在文件名稱中包含了 hash 值，而這個值在每次編譯的時候都會改變的情況。你既可以讓這個外掛程式來幫助你自動產生 HTML 文件，也可以使用 lodash 範本載入產生的 bundles，或是自己載入這些 bundles。

Installation

使用npm 安裝這個外掛程式

$ npm install html-webpack-plugin@2 --save-dev

登入後複製

Basic Usage

##這個外掛程式可以幫助生成HTML 文件，在body 元素中，使用script 包含所有你的webpack bundles，只需要在你的webpack

設定檔中如下設定：

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

登入後複製

這將會自動在dist 目錄中產生一個名為index.html 的文件，內容如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
 </head>
 <body>
  <script src="index_bundle.js"></script> 
 </body>
</html>

登入後複製

如果你有多個webpack 入口點，它們都會被包含在產生的script 元素中。

如果有任何的 CSS 資源包含在 webpack 輸出中（例如，使用 ExtractTextPlugin 提煉出的 css ），這些將會使用 link 包含在 HTML 頁面的 head 元素中。

Configuration

可以進行一系列的配置，支援如下的設定資訊

title: 用來產生頁面的title 元素
filename: 輸出的HTML 檔名，預設是index.html, 也可以直接配置帶有子目錄。
template: 範本檔案路徑，支援載入器，例如 html!./index.html
inject: true | 'head' | 'body' | false ,注入所有的資源到特定的template 或templateContent 中，如果設定為true 或body，所有的
javascript 資源將被放置到body 元素的底部，'head' 將放置到head 元素中。
favicon: 加入特定的 favicon 路徑到輸出的 HTML 檔案中。
minify: {} | false , 傳遞html-minifier 選項給minify 輸出
hash: true | false, 如果為true, 將新增一個唯一的webpack 編譯hash 到所有包含的腳本和CSS 文件，對於解除cache 很有用。
cache: true | false，如果為 true, 這是預設值，僅在檔案修改之後才會發布檔案。
showErrors: true | false, 如果為true, 這是預設值，
錯誤訊息會寫入到HTML 頁面中
#chunks: 允許只加入某些區塊(例如，只是unit test 區塊)
chunksSortMode: 允許控制區塊在新增到頁面之前的排序方式，支援的值： 'none' | 'default' | {function}-default:'auto'
#excludeChunks: 允許跳過某些區塊，(例如，跳過
單元測試的區塊)

下面的範例示範如何使用這些配置。

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

登入後複製

產生多個 HTML 檔案

透過在設定檔中新增多次這個插件，來產生多個 HTML 檔案。

{
 entry: 'index.js',
 output: {
  path: '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 檔案不適合你的需要看，可以建立自己定義的模板。方便的方式是透過 inject 選項，然後傳遞給客製化的 HTML 檔案。 html-webpack-plugin 將會自動注入所有需要的 CSS, js, manifest 和 favicon 檔案到標記中。

plugins: [
 new HtmlWebpackPlugin({
  title: 'Custom template',
  template: 'my-index.html', // Load a custom template 
  inject: 'body' // Inject all scripts into the body 
 })
]

登入後複製

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>

登入後複製

如果你有模板載入器，可以用它來解析這個模板。

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

登入後複製

另外，如果你的模式是一個

字串#，可以使用 templateContent 傳遞它。

plugins: [
 new HtmlWebpackPlugin({
  inject: true,
  templateContent: templateContentString
 })
]

登入後複製

如果 inject 特性不适合你的需要，你希望完全控制资源放置。可以直接使用 lodash 语法，使用 default template 作为起点创建自己的模板。

templateContent 选项也可以是一个函数，以便使用其它语言，比如 jade：

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation) {
   // Return your template content synchronously here 
   return '..';
  }
 })
]

登入後複製

或者异步版本

plugins: [
 new HtmlWebpackPlugin({
  templateContent: function(templateParams, compilation, callback) {
   // Return your template content asynchronously here 
   callback(null, '..');
  }
 })
]

登入後複製

注意，如果同时使用 template 和 templateContent ，插件会抛出错误。

变量 o 在模板中是在渲染时传递进来的数据，这个变量有如下的属性：

1、htmlWebpackPlugin: 这个插件的相关数据 ◦

htmlWebpackPlugin.files: 资源的块名，来自 webpack 的 stats 对象，包含来自 entry 的从 entry point name 到 bundle 文件名映射。

"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: 传递给插件的配置。

2、webpack: webpack 的 stats 对象。

3、webpackConfig: webpack 配置信息。

过滤块

可以使用 chunks 来限定特定的块。

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

登入後複製

还可以使用 excludeChunks 来排除特定块。

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

登入後複製

事件

通过事件允许其它插件来扩展 HTML。

html-webpack-plugin-before-html-processing
html-webpack-plugin-after-html-processing
html-webpack-plugin-after-emit

使用方式：

compilation.plugin('html-webpack-plugin-before-html-processing', function(htmlPluginData, callback) {
 htmlPluginData.html += 'The magic footer';
 callback();
});

登入後複製

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7876

Java教學

1649

CakePHP 教程

1409

Laravel 教程

1301

PHP教程

1245

Related knowledge

VUE3入門教學：使用Webpack進行打包和構建 Jun 15, 2023 pm 06:17 PM

Vue是一款優秀的JavaScript框架，它可以幫助我們快速建立互動性強、高效性好的Web應用程式。 Vue3是Vue的最新版本，它引入了許多新的功能和功能。 Webpack是目前最受歡迎的JavaScript模組打包器和建置工具之一，它可以幫助我們管理專案中的各種資源。本文就為大家介紹如何使用Webpack打包和建構Vue3應用程式。 1.安裝Webpack

Nginx的Web伺服器caddy怎麼使用 May 30, 2023 pm 12:19 PM

Caddy簡介Caddy是一款功能強大，擴展性高的Web伺服器，目前在Github上已有38K+Star。 Caddy採用Go語言編寫，可用於靜態資源託管和反向代理。 Caddy具有以下主要特性：比較Nginx複雜的配置，其獨創的Caddyfile配置非常簡單；可以透過其提供的AdminAPI實現動態修改配置；預設支援自動化HTTPS配置，能自動申請HTTPS憑證並進行配置；能夠擴展到數以萬計的站點；可以在任意地方執行，沒有額外的依賴；採用Go語言編寫，內存安全更有保證。安裝首先我們直接在CentO

如何使用Golang實作網頁應用程式的表單驗證 Jun 24, 2023 am 09:08 AM

表單驗證是Web應用程式開發中非常重要的環節，它能夠在提交表單資料之前對資料進行有效性檢查，避免應用程式出現安全漏洞和資料錯誤。使用Golang可以輕鬆實現網頁應用程式的表單驗證，本文將介紹如何使用Golang來實作網頁應用程式的表單驗證。一、表單驗證的基本要素在介紹如何實作表單驗證之前，我們需要知道表單驗證的基本要素是什麼。表單元素：表單元素是指

Java API 開發中使用 Jetty7 進行 Web 伺服器處理 Jun 18, 2023 am 10:42 AM

JavaAPI開發中使用Jetty7進行Web伺服器處理隨著互聯網的發展，Web伺服器已經成為了應用程式開發的核心部分，同時也是許多企業所關注的焦點。為了滿足日益增長的業務需求，許多開發人員選擇使用Jetty進行Web伺服器開發，其靈活性和可擴展性受到了廣泛的認可。本文將介紹如何在JavaAPI開發中使用Jetty7進行We

怎麼設定nginx保證frps伺服器與web共用80埠 Jun 03, 2023 am 08:19 AM

首先你會有個疑惑，frp是什麼呢？簡單的說frp就是內網穿透工具，配置客戶端以後，可以透過伺服器來存取內部網路。現在我的伺服器，已經用nginx做站了，80端口只有一個，那如果frp的服務端也想使用80端口，那該怎麼辦呢？經過查詢，這個是可以實現的，就是利用nginx的反向代理來實現。補充一下：frps就是伺服器端（server），frpc就是客戶端（client）。第一步：修改伺服器中nginx.conf設定檔在nginx.conf中http{}裡加入以下參數，server{listen80

Web 端即時防擋臉彈幕（基於機器學習） Jun 10, 2023 pm 01:03 PM

防擋臉彈幕，即大量彈幕飄過，但不會遮擋視訊畫面中的人物，看起來像是從人物背後飄過去的。機器學習已經火了好幾年了，但很多人都不知道瀏覽器中也能運行這些能力；本文介紹在視頻彈幕方面的實踐優化過程，文末列舉了一些本方案可適用的場景，期望能開啟一些腦洞。 mediapipeDemo（https://google.github.io/mediapipe/）展示主流防擋臉彈幕實現原理點播up上傳視訊伺服器後台計算提取視訊畫面中的人像區域，轉換成svg儲存用戶端播放視訊的同時，從伺服器下載svg與彈幕合成，人像

web標準是什麼東西 Oct 18, 2023 pm 05:24 PM

Web標準是一組由W3C和其他相關組織制定的規範和指南，它包括HTML、CSS、JavaScript、DOM、Web可訪問性和性能優化等方面的標準化，透過遵循這些標準，可以提高頁面的兼容性、可訪問性、可維護性和效能。 Web標準的目標是使Web內容能夠在不同的平台、瀏覽器和裝置上一致地展示和交互，提供更好的使用者體驗和開發效率。

如何從駕駛艙Web使用者介面啟用管理訪問 Mar 20, 2024 pm 06:56 PM

Cockpit是一個面向Linux伺服器的基於Web的圖形介面。它主要是為了使新用戶/專家用戶更容易管理Linux伺服器。在本文中，我們將討論Cockpit存取模式以及如何從CockpitWebUI切換Cockpit的管理存取。內容主題：駕駛艙進入模式查找當前駕駛艙訪問模式從CockpitWebUI啟用Cockpit的管理訪問從CockpitWebUI禁用Cockpit的管理訪問結論駕駛艙進入模式駕駛艙有兩種訪問模式：受限訪問：這是駕駛艙的默認訪問模式。在這種存取模式下，您無法從駕駛艙Web用戶

See all articles

使用webpack外掛html-webpack-plugin實例詳解

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題