詳解html-webpack-plugin使用
發(fā)布時(shí)間：2020-09-15 16:35:11 作者：hysteria、 
我要評(píng)論
我要評(píng)論這篇文章主要介紹了html-webpack-plugin使用，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
最近在react項(xiàng)目中初次用到了html-webapck-plugin插件，用到該插件的兩個(gè)主要作用：
為html文件中引入的外部資源如script、link動(dòng)態(tài)添加每次compile后的hash，防止引用緩存的外部文件問(wèn)題
可以生成創(chuàng)建html入口文件，比如單頁(yè)面可以生成一個(gè)html文件入口，配置N個(gè)html-webpack-plugin可以生成N個(gè)頁(yè)面入口
1、安裝
cnpm i webpack-plugin -D
2、在webpack.config.json中引用
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //第一步
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js',
},
mode: 'development',
devServer: {
open: true,
port: 8080,
hot: true,
contentBase: 'src'
},
plugins: [
new htmlWebpackPlugin({ //第二步
template: path.join(__dirname, './src/index.html'), //指定生成模板的路徑
filename: 'index.html' //指定生成頁(yè)面的名稱
})
]
}
3、html-webpack-plugin的作用
一、在內(nèi)存中生成一個(gè)指定模板的文件，在訪問(wèn)時(shí)速度更快
二、自動(dòng)為指定模板文件添加bundle.js文件
總結(jié)
到此這篇關(guān)于詳解html-webpack-plugin使用的文章就介紹到這了,更多相關(guān)html-webpack-plugin使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了html webpack plugin插件的使用教程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-26使用html-webpack-plugin'入再內(nèi)存中生成 html 頁(yè)面插件
這篇文章主要介紹了使用html-webpack-plugin'入再內(nèi)存中生成 html 頁(yè)面插件,需要的朋友可以參考下2019-04-02
