详解html-webpack-plugin使用

2023-12-01 0 483

最近在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使用内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 HTML/Xhtml 详解html-webpack-plugin使用 https://www.u-9.cn/sheji/html/9390.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务