html-webpack-plugin 使用總結

時間 2019-11-06

原文原文鏈接

html-webpack-plugin 的做用是：當使用 webpack打包時，建立一個 html 文件，並把 webpack 打包後的靜態文件自動插入到這個 html 文件當中。css

使用

安裝

npm install html-webpack-plugin --save-dev
複製代碼

使用默認配置

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}
複製代碼

html-webpack-plugin 默認將會在 output.path 的目錄下建立一個 index.html 文件，並在這個文件中插入一個 script 標籤，標籤的 src 爲 output.filename。html

生成的文件以下：webpack

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>
複製代碼

當配置多個入口文件 entry 時，生成的將都會使用 script 引入。web

若是 webpack 的輸出中有任何CSS資源 (例如，使用 mini-css-extract-plugin 提取的 CSS)，那麼這些資源將包含在 HTML 頭部的 link 標記中。npm

更多配置

在實際的項目中，須要自定義一些 html-webpack-plugin 的配置，像指定生成目錄和文件，使用指定模版生成文件，更改 document.title 信息等，這就更改默認配置來實現。緩存

屬性名	字段類型	默認值	說明
title	String	Webpack App	網頁 `document.title` 的配置
filename	String	index.html	`html` 文件生成的名稱，可使用 `assets/index.html` 來指定生成的文件目錄和文件名, 重點1:生成文件的跟路徑爲`ouput.path`的目錄。重點2: ‘assets/index.html’ 和 `./assets/index.html` 這兩種方式的效果時同樣的，都是在 `output.path` 目錄下生成 `assets/index.html`
template	String	空	生成 `filename` 文件的模版，若是存在 `src/index.ejs`，那麼默認將會使用這個文件做爲模版。重點：與 `filename` 的路徑不一樣，當匹配模版路徑的時候將會從項目的跟路徑開始
templateParameters	Boolean\|Object\|Function	空	覆蓋默認的模版中使用的參數
inject	Boolean\|String	true	制定 `webpack` 打包的 `js` `css` 靜態資源插入到 `html` 的位置，爲 `true` 或者 `body` 時，將會把 `js` 文件放到 `body` 的底部，爲 `head` 時，將 `js` 腳本放到 `head` 元素中。
favicon	String	空	爲生成的 `html` 配置一個 `favicon`
mete	Object	{}	爲生成的 `html` 文件注入一些 `mete` 信息，例如： `{viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`
base	Object\|String\|false	false	在生成文件中注入 `base` 標籤，例如 `base: "https://example.com/path/page.html` `<base>` 標籤爲頁面上全部的連接規定默認地址或默認目標
minify	Boolean\|Object	若是 `mode` 設置爲 `production` 默認爲 `true` 不然設置爲 `false`	設置靜態資源的壓縮狀況
hash	Boolean	false	若是爲真，則向全部包含的 `js` 和 `CSS` 文件附加一個唯一的 `webpack` 編譯散列。這對於更新每次的緩存文件名稱很是有用
cache	Boolean	true	設置 `js` `css` 文件的緩存，當文件沒有發生變化時，是否設置使用緩存
showErrors	Boolean	true	當文件發生錯誤時，是否將錯誤顯示在頁面
xhtml	Boolean	false	當設置爲 `true` 的時候，將會講 `<link>` 標籤設置爲符合 `xhtml` 規範的自閉合形式

屬性的使用方法

webpack.config.jsbash

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在 output.path 目錄下生成 assets/admin.html 文件
    })
  ]
}
複製代碼

生成多個 `html` 文件

生成多個 html 文件只須要屢次在 plugins 中使用 HtmlWebpackPlugin webpack.config.jsui

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist', 
    filename: 'bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'My App', 
      filename: 'assets/admin.html'  // 在 output.path 目錄下生成 assets/admin.html 文件
    })
  ]
}
複製代碼

使用自定義模版生成 `html` 文件

若是默認的 html 模版不能知足業務需求，好比須要蛇生成文件裏提早寫一些 css 'js' 資源的引用，最簡單的方式就是新建一個模版文件，並使用 template 屬性指定模版文件的路徑，html-webpack-plugin 插件將會自動向這個模版文件中注入打包後的 js 'css' 文件資源。spa

webpack.config.js插件

plugins: [
  new HtmlWebpackPlugin({
    title: 'My App', 
    template: 'public/index.html'
  })
]
複製代碼

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link src="xxx/xxx.css">
  </head>
  <body>
  </body>
</html>
複製代碼

使用自定義的模版接收 HtmlWebpackPlugin 中定義的 title 須要使用 <%= htmlWebpackPlugin.options.title %>

Minification

若是 minify 選項設置爲 true (webpack模式爲 production 時的默認值)，生成的 HTML 將使用 HTML-minifier 和如下選項進行壓縮:

{
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeScriptTypeAttributes: true,
  removeStyleLinkTypeAttributes: true,
  useShortDoctype: true
}
複製代碼