以前我們使用webpack的時(shí)候,我們將程序通過(guò)webpack-dev-server模塊自動(dòng)的打包生成一個(gè)新的文件后,我們要將打包后的js文件引入到html中,使之在瀏覽器中得以顯現(xiàn).
xi.png
但通過(guò)手動(dòng)的引入有個(gè)前提,你必須看的懂webpack.config.js中的配置
xixi.png
為了讓我們寫(xiě)代碼更方便,既是不懂得看配置也可以讓它自動(dòng)成功的引入html文件中,我們可以使用html-webpack-plugin ^_^
html-webpack-plugin插件:
主要作用：
- 1.它可以自動(dòng)的將打包構(gòu)建好的js文件,引入到html文件中
- 它甚至還可以自動(dòng)的生成模板文件(.html)人弓，比如單頁(yè)面可以生成一個(gè)html文件入口，配置N個(gè)
html-webpack-plugin可以生成N*個(gè)頁(yè)面入口
使用過(guò)程：
下載安裝：npm i --save-dev html-webpack-plugin
配置
細(xì)節(jié)：這個(gè)插件與webpack-dev-server沖突索绪。如果想要這個(gè)插件起作用就要將webpack.config.js注釋掉dev-server對(duì)象這配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
----------------------------------------------------------------------------------
//引入path模塊
var path = require('path')
// 進(jìn)行webpack打包構(gòu)建時(shí)的配置宅荤，它是一個(gè)配置對(duì)象
// 這個(gè)配置以后需要引入之后才能使用:當(dāng)然,不用我們自己引入,而是webpack自動(dòng)引入的
module.exports = {
// 入口:你想打包構(gòu)建的源文件路徑--相對(duì)路徑
entry:'./src/app.js',
// 輸出:指定將源文件打包構(gòu)建放置到?個(gè)文件夾?個(gè)文件名稱
output:{
// 這個(gè)路徑從webpack3.0版本以上開(kāi)始,就需要是一個(gè)絕對(duì)路徑
// 使用path方法指定文件目錄
path:path.join(__dirname, 'dist'),
// 指定文件名稱
filename:'bundle.js'
},
//html-webpack-plugin與該配置沖突要去除它,否則無(wú)法起作用
// devServer:{
// 設(shè)置你的托管資源的存放目錄,同時(shí)這個(gè)目錄提供外部的訪問(wèn),默認(rèn)會(huì)生成一個(gè)main.js
//publicPath:'/dist'
//},
plugins: [
new HtmlWebpackPlugin({
// 如果有模板html文件,指定模板源文件
template:'index111.html',
// 將模板文件打包構(gòu)建為目標(biāo)文件的名字
filename:'index.html',
// 指定js文件的插入位置
inject:'head'
})
]
}
由于該插件會(huì)自動(dòng)生成一個(gè)html模板 , 它不會(huì)用我們?cè)械慕⒌膆tml模板文件 , 當(dāng)我們要向該自動(dòng)生成模板中添加或修改某些東西的時(shí)候,我們就可以在HtmlWebpackPlugin({ })中添加配置.
補(bǔ)充說(shuō)明：常見(jiàn)配置
- title：生成的html文檔的標(biāo)題。配置該項(xiàng)诡渴，它并不會(huì)替換指定模板文件中的title元素的內(nèi)容捐晶，除非html模板文件中使用了模板引擎語(yǔ)法來(lái)獲取該配置項(xiàng)值，可以在html頁(yè)面中的title位置添加如下替換：<title><%= htmlWebpackPlugin.options.title %></title>
- filename：輸出文件的文件名稱妄辩，默認(rèn)為index.html惑灵，不配置就是該文件名
- template：本地模板文件的位置，支持加載器(如handlebars眼耀、ejs英支、undersore、html等)哮伟，如果沒(méi)有指定干花，那么就會(huì)自動(dòng)的創(chuàng)建
-
inject：向template或者templateContent中注入所有靜態(tài)資源，不同的配置值注入的位置不經(jīng)相同,默認(rèn)為true.
- true或者body：所有JavaScript資源插入到body元素的底部
- head: 所有JavaScript資源插入到head元素中
- false： 所有靜態(tài)資源css和JavaScript都不會(huì)注入到模板文件中
- favicon: 添加特定favicon路徑到輸出的html文檔中
