webpack打包——htmlWebpackPlugin插件，打包自動生成index.html文件

引言

webpack打包的時候，爲了打包結束後自動生成index.html模板，而不進行手動的創建index.html。需要使用htmlWebpackPlugin插件。下面就來講解如何使用htmlWebpackPlugin插件來自動生成index.html文件

第一步：安裝htmlWebpackPlugin插件

使用命令：npm install html-webpack-plugin -D 來安裝插件

第二步：進行相關的配置

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

plugins:[new HtmlWebpackPlugin()]

這樣在webpack打包結束後就會自動生成index.html文件，並且把打包後的js自動引入到這個文件。但是這個文件裏面沒有我們寫的dom元素，比如根節點。這個時候我們可以指定一個模板，讓它按照這個模板進行打包。比如我們讓它按照我們指定的index.html模板進行打包。配置如下：

plugins:[new HtmlWebpackPlugin(){

template:'src/index.html'

}]