时间：2023-03-03 11:51:01 | 来源：建站知识
时间：2023-03-03 11:51:01 来源：建站知识
详解html-webpack-plugin使用：这篇文章主要介绍了html-webpack-plugin使用，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：
为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口
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' //指定生成页面的名称
})
]
}
3、html-webpack-plugin的作用
一、在内存中生成一个指定模板的文件，在访问时速度更快
二、自动为指定模板文件添加bundle.js文件
总结
到此这篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/web/745178.html
关键词：使用
在线咨询
