webpack學習筆記 (二) html-webpack-plugin使用

時間 2019-11-10

標籤 webpack 學習筆記 html plugin 使用欄目 HTML 简体版

原文原文鏈接

這個插件的兩個做用：javascript

爲html文件中引入的外部資源如script、link動態添加每次compile後的hash，防止引用緩存的外部文件問題css
能夠生成建立html入口文件，好比單頁面能夠生成一個html文件入口，配置N個html-webpack-plugin能夠生成N個頁面入口html

安裝使用以下：java

1、首先安裝html-webpack-plugin插件webpack

在cmd中打開項目，輸入cnpm install html-webpack-plugin；git

2、在webpack-config.js的plugins裏面添加信息，以下圖github

而後在cmd中輸入，webpack，便可以在項目文件夾下自動生成index.html。若是報錯，則表示，未安裝html-webpack-plugin插件。web

注：不配置任何選項的html-webpack-plugin插件，他會默認將webpack中的entry配置全部入口thunk和extract-text-webpack-plugin抽取的css樣式都插入到文件指定的位置。npm

3、多頁面配置緩存

對於生成多頁面的狀況，在plugins配置多個plugin便可

 1 plugins:[
 2         new webpack.BannerPlugin('測試webpack搭建   '),
 3         new HtmlWebpackPlugin(),
 4         new HtmlWebpackPlugin({
 5           title:'測試webpack',
 6           template: 'src/template/index.html', // 源模板文件
 7           filename: './index1.html', // 輸出文件【注意：這裏的根路徑是module.exports.output.path】
 8           showErrors: true,
 9           inject: 'body',
10           chunks: ["index"],
11           favicon:"./src/fav.ico",
12           hash:true,
13           minify:{
14                 caseSensitive: false, //是否大小寫敏感
15                 removeComments:true, // 去除註釋
16                 removeEmptyAttributes:true, // 去除空屬性
17                 collapseWhitespace: true //是否去除空格
18             }
19       }),
20         new HtmlWebpackPlugin({
21           title:'測試webpack',
22           template: 'src/template/index.html', // 源模板文件
23           filename: './index2.html', // 輸出文件【注意：這裏的根路徑是module.exports.output.path】
24           showErrors: true,
25           inject: 'body'
26       })
27     ]

多頁面配置

4、使用template模板頁面

增長模板頁面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title><%= htmlWebpackPlugin.options.title %></title>
 6     <% for (var css in htmlWebpackPlugin.files.css) { %>
 7     <link href="<%=htmlWebpackPlugin.files.css[css] %>" rel="stylesheet">
 8     <% } %>
 9 </head>
10 <body>
11 <!-- 測試 -->
12 <div id="app" style=""></div>
13 </body>
14 <script type="text/babel">
15 </script>
16 </html>

模板頁面

在配置中配置模板頁面

5、自定義增長的js文件

在配置文件中，chunks選項添加對應的內容便可。

對應的內容爲entry中的屬性。具體以下圖

6、生成頁面壓縮

配置minify配置項，經常使用的幾個配置見上圖

7、其餘配置項解釋以下

title: 生成的HTML模板的title，若是模板中有設置title的名字，則會忽略這裏的設置
filename: 生成的模板文件的名字
關於filename補充兩點：

一、filename配置的html文件目錄是相對於webpackConfig.output.path路徑而言的，不是相對於當前項目目錄結構的。
二、指定生成的html文件內容中的link和script路徑是相對於生成目錄下的，寫路徑的時候請寫生成目錄下的相對路徑。
template: 模板來源文件
關於template補充幾點：

一、template配置項在html文件使用file-loader時，其所指定的位置找不到，致使生成的html文件內容不是指望的內容。
二、爲template指定的模板文件沒有指定任何loader的話，默認使用ejs-loader。如template: './index.html'，若沒有爲.html指定任何loader就使用ejs-loader
inject: 引入模塊的注入位置；取值有true/false/body/head；true | 'head' | 'body' | false ,注入全部的資源到特定的 template 或者 templateContent 中，若是設置爲 true 或者 body，全部的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
true或者body：全部JavaScript資源插入到body元素的底部
二、head: 全部JavaScript資源插入到head元素中
三、false：全部靜態資源css和JavaScript都不會注入到模板文件中
favicon: 指定頁面圖標；

minify: {} | false , 傳遞 html-minifier 選項給 minify 輸出。是html-webpack-plugin中集成的 html-minifier ，生成模板文件壓縮配置，有不少配置項，能夠查看詳細文檔

 caseSensitive: false, //是否大小寫敏感  collapseBooleanAttributes: true, //是否簡寫boolean格式的屬性如：disabled="disabled" 簡寫爲disabled  collapseWhitespace: true //是否去除空格

hash: 是否生成hash添加在引入文件地址的末尾，相似於咱們經常使用的時間戳，好比最終引入是：<script type="text/javascript" src="bundle.049424f7d7ea5fa50656.js?049424f7d7ea5fa50656"></script>。這個能夠避免緩存帶來的麻煩
cache: 是否須要緩存，若是填寫true，則文件只有在改變時纔會從新生成
showErrors: 是否將錯誤信息寫在頁面裏，默認true，出現錯誤信息則會包裹在一個pre標籤內添加到頁面上
chunks: 引入的模塊，這裏指定的是entry中設置多個js時，在這裏指定引入的js，若是不設置則默認所有引入
chunksSortMode: 引入模塊的排序方式，支持的值：'none' | 'default' | {function}-default:'auto'
excludeChunks: 排除的模塊
xhtml: 生成的模板文檔中標籤是否自動關閉，針對xhtml的語法，會要求標籤都關閉，默認false

8、插件事件（引用位置）

不知道你發現沒有，html-webpack-plugin插件在插入靜態資源時存在一些問題：

在插入js資源只能插入head或者body元素中，不能一些插入head中，另外一些插入body中
不支持在html中文件內聯*，例如在文件的某個地方用<script src="xxx.js?__inline"></script>來內聯外部腳本

爲此，有人專門給插件做者提問了這個問題；對此插件做者提供了插件事件，容許其餘插件來改變html文件內容。具體的事件以下：

Async（異步事件）:

* 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

Sync（同步事件）:

* html-webpack-plugin-alter-chunks

這些事件是提供給其餘插件使用的，用於改變html的內容。所以，要用這些事件須要提供一個webpack插件。例以下面定義的MyPlugin插件。

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文件中配置Myplugin信息：

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

注：一個比較全的配置

 1 var webpack=require('webpack');
 2 var HtmlWebpackPlugin = require('html-webpack-plugin');
 3  
 4 module.exports = {
 5     devtool: 'eval-source-map', // 還不知有什麼用
 6     entry: {
 7             index:"./src/js/runoob1.js",
 8             main:"./src/js/runoob1.js"
 9         },
10     output: {
11         path: __dirname+"/build/web/",    //經過HtmlWebpackPlugin插件生成的html文件存放在這個目錄下面
12         filename: "../js/[name].js" //編譯生成的js文件存放到根目錄下面的js目錄下面,若是js目錄不存在則自動建立，相對於path
13     },
14     module: {
15         loaders: [
16             { test: /\.css$/, loader: "style-loader!css-loader" }
17         ]
18     },
19     plugins:[
20         new webpack.BannerPlugin('測試webpack搭建           '),
21         new HtmlWebpackPlugin(),
22         new HtmlWebpackPlugin({
23           title:'測試webpack',
24           template: 'src/template/index.html', // 源模板文件
25           filename: './index1.html', // 輸出文件【注意：這裏的根路徑是module.exports.output.path】
26           showErrors: true,
27           inject: 'body',
28           chunks: ["index"],
29           favicon:"./src/fav.ico",
30           hash:true,
31           minify:{
32                 caseSensitive: false, //是否大小寫敏感
33                 removeComments:true, // 去除註釋
34                 removeEmptyAttributes:true, // 去除空屬性
35                 collapseWhitespace: true //是否去除空格
36             }
37       }),
38         new HtmlWebpackPlugin({
39           title:'測試webpack',
40           template: 'src/template/index.html', // 源模板文件
41           filename: './index2.html', // 輸出文件【注意：這裏的根路徑是module.exports.output.path】
42           showErrors: true,
43           inject: 'body'
44       })
45     ]
46 };