Webpack(应用二:HtmlWebpackPlugin)

news2024/12/27 2:29:32

 上一文章介绍了Webpack的基本使用。

这章介绍webpack的HtmlWebpackPlugin,也就是上一章节遗留每次打包后,html都得重新链接打包地址名称,现在通过HtmlWebpackPlugin来实现一起打包。


提示:没有学习上一章的小伙伴,可以先学习哈

一、HtmlWebpackPlugin是什么,有什么作用?

HtmlWebpackPlugin是webpack 的插件,用到该插件的两个主要作用:

        1、为html文件中引入的外部资源如scriptlink动态添加每次compile后的hash,防止引用缓存的外部文件问题

        2、可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置Nhtml-webpack-plugin可以生成N个页面入口

也就是说,插件的基本作用就是生成html文件,不用手动生成。

二、HtmlWebpackPlugin的实际应用

1.下载插件

在终端中输入: npm install html-webpack-plugin --save-dev

2.webpack.config.js修改配置

 新建html文件,更改权限后直接运行即可

3.运行

在命令行输入npm run build命令执行,自动生成打包文件,直接运行html就可以观看效果

 

 

tips:不需要在未打包的html输入链接js文件地址


总结

HtmlWebpackPlugin方便快捷生成html文件,不需要每次都写入外部资源文件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/352701.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ZenBuster:一款功能强大的多线程跨平台URL枚举工具

关于ZenBuster ZenBuster是一款功能强大的多线程跨平台URL枚举工具,该工具基于Python开发,同时还具备暴力破解功能。 该工具适用于安全专业人员,可以在渗透测试或CTF比赛中为广大研究人员提供帮助,并收集和目标相关的各种信息。…

全网多种方法分析解决HTTP Status 404资源未找到的错误,TCP的3次握手,dns域名解析,发起http请求以及cookie和session的区别

文章目录1. 文章引言2. 简述URL3. http完整请求3.1 DNS域名解析3.2 TCP的3次握手3.3 发起http请求3.4 浏览器解析html代码3.5 浏览器对页面进行渲染呈现给用户4. 解决404错误的方法5. 补充知识点5.1 cookie和session的区别5.2 ChatGPT的介绍1. 文章引言 正赶上最近ChatGPT很火…

将springboot项目生成可依赖的jar,并引入到项目中

1、将springboot项目生成可依赖的jar包的方法 SpringBoot项目默认打包的是可运行jar包,也可以打包成不可运行的jar包。 能打成可运行的jar包是因为,Spring Boot 项目引入了 spring-boot-maven-plugin 依赖包。 spring-boot-maven-plugin具有repackage …

【自学Linux】 Linux文件目录结构

Linux文件目录结构 Linux文件目录结构教程 在 Linux 中,有一个很经典的说法,叫做一切皆文件,因此,我们在系统学习 Linux 之前,首先要了解 Linux 的文件目录结构。Linux 主要的目录有三大类,即根目录(/)&a…

火山引擎 DataTester:A/B 测试,让企业摆脱广告投放“乱烧钱”

更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群 在广告投放的场景下,一线广告优化师通常会创建多个计划,去测试不同的广告素材效果。这套方法看似科学,实际上却存在诸多问题&…

NJ/NX将数据写入到SD中,保存为CSV文件格式

NJ/NX将数据写入到SD中,保存为CSV文件格式 实验时间:2022.10.31 实验人员:钱少青 实验器材:NJ501-1300(Ver:1.12),HMC-SD291(2G),SysmacStudio(ver:1.52) 实验目的:将Byte、Int、Real、Stri…

3年功能3年自动化,从8k到23k的学习过程

简单的先说一下,坐标杭州,14届本科毕业,算上年前在阿里巴巴的面试,一共有面试了有6家公司(因为不想请假,因此只是每个晚上去其他公司面试,所以面试的公司比较少)其中成功的有4家&…

ICLR 2022—你不应该错过的 10 篇论文(下)

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 ICLR 2023已经放榜,但是今天我们先来回顾一下去年的ICLR 2022! ICLR 2022将于2022年 4 月 25 日星期一至 4 月 29 日星期五在线举行(连续第三年!&#x…

Java中ThreadLocal类详解

ThreadLocal从名字上我们看出,它叫做本地线程变量,每个线程都有各自的的变量,而不再是我们之前的两个线程共用同一个变量;以这个类创建的变量,在多个线程都用到这个变量时,可以为每一个线程创建一个变量副本…

sql server执行md5加密的时候,字符串前带N和不带N的结果是不一样的

最近因为项目的需要,报表中需要对数据进行MD5加密,结果报表系统得出来的sql语句,字符串前都自动带了N,执行时,发现得到的结果跟在数据库中执行的sql(字符串不带N)得的值不一样,最后自…

RocketMQ高性能原理分析

目录一、读队列与写队列1.概念介绍2.读写队列个数关系分析二、消息持久化1.持久化文件介绍2.持久化结构介绍:三、过期文件删除1.如何判断文件过期2.什么时候删除过期文件四、高效文件写1.零拷贝技术加速文件读写2.文件顺序写3.刷盘机制五、 消息主从复制六、负载均衡…

微服务项目【消息推送(RabbitMQ)】

创建消费者 第1步&#xff1a;基于Spring Initialzr方式创建zmall-rabbitmq消费者模块 第2步&#xff1a;在公共模块中添加rabbitmq相关依赖 <!--rabbitmq--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-bo…

有趣的HTML实例(十三) 咖啡选择(css+js)

一个人追求目标的路途是孤单的&#xff0c;一个人独品辛酸的时候是寂寥的&#xff0c;一个人马不停蹄的追赶着&#xff0c;狂奔着&#xff0c;相信前方是一片光明&#xff0c;我从不放弃希望&#xff0c;就像我对生活的信念&#xff0c;没有人可以动摇。 ——《北京青年》 目录…

Qt扫盲- QLocalSocket类

QLocalSocket类总结一、概述二、使用一、概述 QLocalSocket类是一个比较特殊的传输数据的的一个工具类&#xff0c;它和 QTcpSocket 的区别就是&#xff0c;这个QLocalServer 只是在connectToServer 的时候连接主机是用的一个字符串或者标识符来表示主机&#xff0c;而QTcpSoc…

基于模型预测控制(MPC)的悬架系统仿真分析

目录 前言 1.悬架系统 2.基于MPC的悬架系统仿真分析 2.1 simulink模型 2.2仿真结果 2.3 结论 3 总结 前言 模型预测控制是无人驾驶中较为热门的控制算法&#xff0c;但是对于悬架等这类系统的控制同样适用。 我们知道模型预测控制主要可以划分为三个部分&#xff1a; …

ForkJoinPool原理

1、概述 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架。ForkJoinPool是Java中提供了一个线程池&#xff0c;特点是用来执行分治任务。主题思想是将大任务分解为小任务&#xff0c;然后继续将小任务分解&#xff0c;直至能够直接解决为止&#xff0c;然后再依次将任…

再谈Java的String字符串

我们先看下面几个常见的面试题&#xff1a; String s1 "abc";String s2 new String("abc");String s3 "a" "b" "c";String s4 s2.intern();System.out.printf("s1s2:%s\n", s1 s2);System.out.printf(&quo…

IOS安全区域适配

对于 iPhone 8 和以往的 iPhone&#xff0c;由于屏幕规规整整的矩形&#xff0c;安全区就是整块屏幕。但自从苹果手机 iphoneX 发布之后&#xff0c;前端人员在开发移动端Web页面时&#xff0c;得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果…

Django图书商场购物系统python毕业设计项目推荐

mysql数据库进行开发&#xff0c;实现了首页、个人中心、用户管理、卖家管理、图书类型管理、图书信息管理、订单管理、系统管理等内容进行管理&#xff0c;本系统具有良好的兼容性和适应性&#xff0c;为用户提供更多的网上图书商城信息&#xff0c;也提供了良好的平台&#x…

【APP渗透测试】 Android APP渗透测试技术实施以及工具使用(客户端服务端)

文章目录前言一、安全威胁分析二、主要风险项三、Android测试思维导图四、反编译工具五、Android客户端漏洞一、Jnaus漏洞漏洞二、数据备份配置风险漏洞漏洞三、Activity组件泄露漏洞漏洞四、BroadcastReceiver组件泄露漏洞漏洞五、允许模拟器Root环境登录漏洞漏洞六、未识别代…