html-webpack-plugin

時間 2019-11-19

標籤 html webpack plugin 欄目 HTML 简体版

原文原文鏈接

簡介:

　　 html-webpack-plugin 是一個webpack插件，它簡化了注入webpack打包文件的html的建立。當webpack打包文件使用哈希值做爲文件名而且每次編譯的哈希值都不一樣時尤爲有用。你可使用lodash模板來建立html文件，也可使用你本身的加載器。javascript

安裝：

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

第三方插件：

html-webpack-plugin 經過提供鉤子（參考下面的事件）來擴展你的需求。能夠經過零配置來集成下面這些很是有用的插件：css

webpack-subresource-integrity 用於加強資源安全性
appcache-webpack-plugin 供IOS和Android離線使用
favicons-webpack-plugin 用於對IOS，Android和桌面瀏覽器生成圖標和收藏夾圖標
html-webpack-harddisk-plugin 能夠被用於老是將html文件寫入磁盤，使用webpack-dev-server和模塊熱替換時尤爲有用
html-webpack-inline-source-plugin 用於在生成的html文件中內聯資源
html-webpack-inline-svg-plugin 用於在生成的html文件中內聯SVG資源
html-webpack-exclude-assets-plugin 使用正則表達式排除指定的資源
html-webpack-include-assets-plugin 用於添加js或css文件路徑（例如那些被copy-webpack-plugin插件編譯的文件）
script-ext-html-webpack-plugin 用於對 <script> 標籤添加 async，defer,module 屬性，或者內聯這些屬性
style-ext-html-webpack-plugin 用於將 <link> 引入的外部樣式轉換成由 <style> 標籤包含的內部樣式
resource-hints-webpack-plugin 使用 <link rel='preload'> 和 <link rel='prefetch'> 添加資源提示，提升頁面的加載和初始化速度
preload-webpack-plugin 使用 <link rel='preload'> 自動鏈接異步的javascript塊，幫助進行懶加載
link-media-html-webpack-plugin 容許注入樣式表標記 <link/> 來自動設置媒體屬性；對於提供特殊的桌面/移動/打印顯示等很是有用。瀏覽器會根據條件下載對應的樣式表
inline-chunk-manifest-html-webpack-plugin 用於內聯webpack的 chunk manifest。默認提取 manifest 到 <head> 標籤內

基本用法：

插件生成一個在 <body> 內使用 <script> 標籤引入全部 webpack 打包文件的html5文件。html

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

 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 文件：java

 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文件中。node

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

配置：

你能夠經過一個散列對象來配置 HtmlWebpackPlugin。可配置的屬性以下：git

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

1. 不設置任何加載器github

默認（若是你不使用任何加載器）使用 fallback lodash loader:web

{
  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 , 英語水平有限, 翻譯不當之處, 敬請指正.

相關標籤/搜索

htmlwebpackplugin

HTML

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。