webpack plugin插件—HtmlWebpackPlugin

 

　　 前言

　    首先，我們來簡單了解一下，plugin和HtmlWebpackPlugin是什么？

　　plugin：可以在webpack運行到某個節點的時候，幫你做一些事，用過vue的小伙伴可以簡單理解為類似vue生命周期函數

　　HtmlWebpackPlugin：webpack的一個插件，能自動幫你在dist目錄下生成一個html文件。同時，幫你引入打包后生成的js文件，如下圖

　　

 

　　 安裝

　　npm install html-webpack-plugin -D（-D 等於 --save-dev）

 

　　配置

　　在webpack.config.js文件中添加下圖箭頭所指代碼

　  

　  注：var HtmlWebpackPlugin = require('html-webpack-plugin') 引入插件

　　　  plugins: [new HtmlWebpackPlugin()]  實例化插件

　　　  官方說明：https://www.webpackjs.com/plugins/html-webpack-plugin/

 

　  補充：該插件還能自定義打包生成后的html模板

　　　　   比如，使用插件后，會自動生成如下模板

　　　　  

 　　　　　 若想讓該插件自動打包生成的html模板中增加下圖紅色框代碼應該怎么做呢？

　　　　　   

 　　　　　 如下配置（index.html為你自己在src目錄下創建的）