这篇文章主要介绍了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使用内容请搜索爱安网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持爱安网!

    无相关信息
最新资讯
趣头条第四季度营收13.02亿元,同比下滑21.5%

趣头条第四季度营收13

趣头条今日发布了2020年第四季度及全年财报。第四季度
华为高管回应涉足养猪传闻:华为不养猪 赋能企业用AI养好猪

华为高管回应涉足养猪

针对此前外界盛传的华为入局养猪行业一事,华为机器视觉
上海第三批监管沙盒试点名单出炉,聚焦区块链、大数据等技术

上海第三批监管沙盒试

上海金融科技创新监管试点工作组对外公示上海市第三批
手机芯片缺货蔓延至高端旗舰系列 缓解需等到年底

手机芯片缺货蔓延至高

多家第三方机构预测,缺芯问题会贯穿2021年,由于产能提升
女子给搬家司机差评遭死亡威胁 货运平台安全问题再受关注

女子给搬家司机差评遭

今日#女子给搬家司机差评遭死亡威胁#的话题登上微博热
香港证监会首次放行主动投资策略虚拟数字资产基金发行

香港证监会首次放行主

随着全球首款比特币ETF在加拿大资本市场上市,香港证监
最新文章
详解HTML中字体使用line-height依然不能垂直居中解决办法

详解HTML中字体使用li

这篇文章主要介绍了详解HTML中字体使用line-height依
html直接引用vue和element-ui的方法

html直接引用vue和ele

这篇文章主要介绍了html直接引用vue和element-ui的方
在HTML里加载摄像头的方法

在HTML里加载摄像头的

这篇文章主要介绍了如何在HTML里加载摄像头,本文通过实
html父子页面iframe双向发消息的实现示例

html父子页面iframe双

这篇文章主要介绍了html父子页面iframe双向发消息的实
HTML用户注册页面设置源码

HTML用户注册页面设置

这篇文章主要介绍了HTML用户注册页面设置源码,代码简
当div设置contentEditable=true时,重置其内容后无法光标定位

当div设置contentEdit

这篇文章主要介绍了解决当div设置contentEditable=tru