认识Webpack插件Plugin;CleanWebpackPlugin插件;HtmlWebpackPlugin;DefinePlugin;Mode模式

目录

  • 1_认识插件Plugin
  • 2_CleanWebpackPlugin
  • 3_HtmlWebpackPlugin
  • 4_DefinePlugin
    • 4.1_介绍
    • 4.2_DefinePlugin的使用
  • 5_Mode模式

1_认识插件Plugin

Webpack的另一个核心是Plugin,官方有这样一段对Plugin的描述:

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是:

  • Loader是用于特定的模块类型进行转换;
  • Plugin可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等;

2_CleanWebpackPlugin

前面演示的过程中,每次修改了一些配置,重新打包时,都需要手动删除dist文件夹,可以借助于一个插件来帮助完成,这个插件就是CleanWebpackPlugin;

首先,先安装这个插件:

npm install clean-webpack-plugin -D

之后在插件中配置:

const { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = {//其余代码省略plugins: [new CleanWebpackPlugin()]
}

3_HtmlWebpackPlugin

还有一个不太规范的地方:

  • HTML文件是编写在根目录下的,而最终打包的dist文件夹中是没有index.html文件的。
  • 在进行项目部署的时,必然也是需要有对应的入口文件index.html;
  • 所以也需要对index.html进行打包处理;

对HTML进行打包处理可以使用另外一个插件:HtmlWebpackPlugin;

npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin()]
}

生成index.html分析

现在自动在dist文件夹中,生成了一个index.html的文件, 该文件中也自动添加了打包的bundle.js文件;
文件是如何生成的?

  • 默认情况下是根据ejs的一个模板来生成的;
  • 在html-webpack-plugin的源码中,有一个default_index.ejs模块;

生成的index.html内容是默认的模板,也可以生成自己想要的模板


自定义HTML模板

如果想在自己的模块中加入一些比较特别的内容:

  • 比如添加一个noscript标签,在用户的JavaScript被关闭时,给予响应的提示;
  • 比如在开发vue或者react项目时,需要一个可以挂载后续组件的根标签 <div id="app"></div>

这个需要一个属于自己的index.html模块,比如说下面这个模板

<!DOCTYPE html>
<html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><!-- built files will be auto injected --></body>
</html>

自定义模板数据填充

上面的代码中,会有一些类似这样的语法<% 变量 %>,这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时,可以添加如下配置:

  • template:指定要使用的模块所在的路径;
  • title:在进行htmlWebpackPlugin.options.title读取时,就会读到该信息;
const HtmlWebpackPlugin = require('html-webpack-plugin')module.exports = {plugins: [new HtmlWebpackPlugin({title: "项目名称",template: "./index.html"})]
}     

4_DefinePlugin

4.1_介绍

但是,这个时候编译还是会报错,因为自定义的模块中还使用到一个BASE_URL的常量。报错如下

ERROR in Template execution failed: ReferenceError:BASE_URL is not defined
ERROR in ReferenceError: BASE_URL is not defined

这是因为在编译template模块时,有一个BASE_URL:<link rel="icon" href="<%= BASE_URL %>favicon.ico">,但是并没有设置过这个常量值,所以会出现没有定义的错误;

这个时候可以使用DefinePlugin插件;


4.2_DefinePlugin的使用

DefinePlugin允许在编译时创建配置的全局常量,是一个webpack内置的插件(不需要单独安装):

const { DefinePlugin } = require("webpack")module.exports = {plugins: [new DefinePlugin({BASE_URL: "'./'",coder: "'xxx'", 	//当成一个全局变量,根据实际情况决定是否添加counter: "123"	 //当成一个全局变量})]
}

这个时候,编译template就可以正确的编译了,会读取到BASE_URL的值;

5_Mode模式

Mode配置选项,可以告知webpack使用相应模式的内置优化:

  • 默认值是production(什么都不设置的情况下);
  • 可选值有:‘none’ | ‘development’ | ‘production’;

这几个选项的区别?

在这里插入图片描述

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

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

相关文章

摄像机sd卡格式化怎么恢复数据?简单五步轻松解决

在使用摄像机时&#xff0c;有时不慎将SD卡格式化&#xff0c;导致重要的照片或视频文件丢失。然而&#xff0c;不必惊慌&#xff0c;本文将详细解释如何恢复被格式化的摄像机SD卡上的数据&#xff0c;可通过下面提供的五步&#xff0c;轻松解决数据丢失问题&#xff0c;以确保…

如何开启一个java微服务工程

安装idea IDEA常用配置和插件&#xff08;包括导入导出&#xff09; https://blog.csdn.net/qq_38586496/article/details/109382560安装配置maven 导入source创建项目 修改项目编码utf-8 File->Settings->Editor->File Encodings 修改项目的jdk maven import引入…

@ControllerAdvice注解使用及原理探究 | 京东物流技术团队

最近在新项目的开发过程中&#xff0c;遇到了个问题&#xff0c;需要将一些异常的业务流程返回给前端&#xff0c;需要提供给前端不同的响应码&#xff0c;前端再在次基础上做提示语言的国际化适配。这些异常流程涉及业务层和控制层的各个地方&#xff0c;如果每个地方都写一些…

APP开发中的性能优化:提升用户满意度的关键

APP开发中的性能优化是需要持续进行的&#xff0c;它不仅能够让用户体验到 APP的使用感受&#xff0c;还能在一定程度上提升用户的满意度&#xff0c;从而提升 APP的粘性和转化率。不过在实际开发中&#xff0c;很多 APP开发公司会存在性能优化上的问题&#xff0c;这就需要了解…

k8s的架构

简介 一个 K8s 系统&#xff0c;通常称为一个 K8s 集群&#xff0c;集群主要包括两个部分 一个 Master 节点&#xff08;主节点&#xff09; 一群 Node 节点&#xff08;计算节点&#xff09; Master节点 Master 节点包括 API Server、Scheduler、Controller manager、etcd A…

【EI/SCOPUS会议征稿】第三届物联网与机器学习国际学术会议(IoTML 2023)

第三届物联网与机器学习国际学术会议&#xff08;IoTML 2023&#xff09; 2023 3rd International Conference on Internet of Things and Machine Learning 2023年物联网与机器学习国际学术会议&#xff08;IoTML 2023&#xff09;将于2023年9月15-17日在新加坡召开。会议…

Boost开发指南-4.2ignore_unused

ignore_unused 编写代码的过程中有时会出现一些暂时用不到但又必须保留的变量&#xff0c;GCC等编译器会对此发出警告&#xff0c;使用-Wunused可以关闭这些警告消息&#xff0c;不过这也有可能导致潜在的隐患。古老的办法是使用(void)var的形式来“使用”一下变量&#xff0c…

java后端富文本转word,再传递到浏览器下载。

思路参考&#xff0c;以及所有的工具类都使用了》牧羊人大佬的代码《 有帮助的话不用给到我点赞&#xff0c;给大佬点赞即可 这是前端代码&#xff0c;必须使用get。 post后端返回的流浏览器接收不到&#xff08;具体原因不详&#xff09;。get无法传递requestBody&#xff0c;…

医学影像PACS系统源码:多功能服务器和阅片系统

PACS系统是以最新的IT技术为基础&#xff0c;遵循医疗卫生行业IHE/DICOM3.0和HL7标准&#xff0c;开发的多功能服务器和阅片系统。通过简单高性能的阅片功能&#xff0c;支持繁忙时的影像诊断业务&#xff0c;拥有保存影像的院内Web传输及离线影像等功能&#xff0c;同时具有备…

?.的写法 后缀修饰符

概览&#xff1a;处理后端返回的数据data&#xff0c;写法&#xff1a;data?.name。解决vue框架编译出现的报错Cannot read property name of undefined。出现问题的原因&#xff1a;这是因为我们试图访问对象中不在的 key 为 name 的属性&#xff0c;那么怎么解决呢&#xff…

cpolar内网穿透外网远程访问本地网站

cpolar内网穿透外网远程访问本地网站 文章目录 cpolar内网穿透外网远程访问本地网站 在现代人的生活中&#xff0c;电脑是离不开的重要设备&#xff0c;大家看到用到的各种物品都离不开电脑的支持。尽管移动电子设备发展十分迅速&#xff0c;由于其自身存在的短板&#xff0c;使…

SpringBoot2.5.6整合Elasticsearch7.12.1

SpringBoot2.5.6整合Elasticsearch7.12.1 下面将通过SpringBoot整合Elasticseach&#xff0c;SpringBoot的版本是2.5.6&#xff0c;Elasticsearch的版本是7.12.1。 SpringBoot整合Elasticsearch主要有三种方式&#xff0c;一种是通过elasticsearch-rest-high-level-client&am…

科技的成就(四十九)

381、机器人 Unimate 诞生 "1961 年&#xff0c;第一款工业机器人 Unimate 诞生。工程师恩格尔伯格受阿西莫夫小说《我&#xff0c;机器人》影响&#xff0c;与发明家德沃尔成立了 Unimation。1961 年&#xff0c;公司的第一台机器 人 Unimate 开始在通用电气新泽西工厂试…

Kotlin~Facade

概念 又称门面模式&#xff0c;为复杂系统提供简单交互接口。 角色介绍 Facade&#xff1a;外观类&#xff0c;供客户端调用&#xff0c;将请求委派给响应的子系统。SubSystem&#xff1a;子系统&#xff0c;独立的子设备或子类 UML 代码实现 class Light(val name: Strin…

STM32基础回顾

文章目录 单片机编程的原理GPIO中断EXTI外部中断定时器中断、串口中断 定时器定时器中断配置过程通用定时器输出比较功能&#xff1a;PWM波的生成定时器的输入捕获功能主从触发模式PWMI模式 定时器的编码器接口 DMA简介通信接口USART软件配置流程&#xff1a;1、仅发数据的配置…

java 异常 java.util.ConcurrentModificationException java 删除集合中满足条件的元素

java 异常 java.util.ConcurrentModificationException java.util.ConcurrentModificationException是Java中的一个常见异常&#xff0c;通常在使用迭代器或并发操作时发生。当集合在迭代过程中被修改时&#xff0c;就可能会抛出这个异常。 这个异常是为了帮助开发人员发现并…

计算两个日期相差几年几月几天,考虑闰年平年

java8以下 计算两个日期相差几年几月几天&#xff0c;考虑闰年平年 // java 计算两个日期相差几年几月几天&#xff0c;考虑闰年平年public void calculateDifference(String startDade, String endDate) {Calendar calendar1 Calendar.getInstance(); // 第一个日期&#…

深度解析线程池的文章

java 系统的运行归根到底是程序的运行&#xff0c;程序的运行归根到底是代码的执行&#xff0c;代码的执行归根到底是虚拟机的执行&#xff0c;虚拟机的执行其实就是操作系统的线程在执行&#xff0c;并且会占用一定的系统资源&#xff0c;如CPU、内存、磁盘、网络等等。所以&a…

【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT 3

1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨&#xff0c;在1995年出版的《未来之路》一书中&#xff0c;提及“物物互联”。1998年麻省理工学院提出&#xff0c;当时被称作EPC系统的物联网构想。2005年11月&#xff0c;国际电信联盟发布《ITU互联网…