当前位置： 首页 > news >正文

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

news 2025/12/16 1:52:46

目录

  • 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’；

这几个选项的区别？

在这里插入图片描述

相关文章：

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

目录 1_认识插件Plugin2_CleanWebpackPlugin3_HtmlWebpackPlugin4_DefinePlugin4.1_介绍4.2_DefinePlugin的使用 5_Mode模式 1_认识插件Plugin Webpack的另一个核心是Plugin&#xff0c;官方有这样一段对Plugin的描述&#xff1a; While loaders are used to transform certai…...

编程日记 2023/8/4 11:07:00

Redis 6.0的新特性：多线程、客户端缓存与安全

2020年5月份&#xff0c;6.0版本。 面向网络处理的多IO线程可以提高网络请求处理的速度&#xff0c;而客户端缓存可以让应用直接在客户端本地读取数据&#xff0c;这两个特性可以提升Redis的性能。 细粒度权限控制让Redis可以按照命令粒度控制不同用户的访问权限&#xff0c;…...

编程日记 2023/8/4 11:05:59

【雕爷学编程】MicroPython动手做（37）——驱动LCD与图文显示3

MixPY——让爱(AI)触手可及 MixPY布局 主控芯片&#xff1a;K210&#xff08;64位双核带硬件FPU和卷积加速器的 RISC-V CPU&#xff09; 显示屏&#xff1a;LCD_2.8寸 320*240分辨率&#xff0c;支持电阻触摸 摄像头&#xff1a;OV2640&#xff0c;200W像素 扬声器&#…...

编程日记 2023/8/4 11:04:58

自然语言处理从入门到应用——LangChain：提示（Prompts）-[提示模板：序列化提示信息]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 将提示信息存储为文件而不是Python代码通常更好。这样可以方便共享、存储和版本控制提示信息。本文介绍了如何在LangChain中进行提示信息的序列化&#xff0c;包括不同类型的提示信息和不同的序列化选项。 在高层次上…...

编程日记 2023/8/4 11:03:57

【LinearAlgebra】Chapter 12 - Linear Algebra in Probability Statistics

文章目录 Chapter 12 - Linear Algebra in Probability & StatisticsVariance (around athe mean) 方差&#xff08;接近均值&#xff09;Continuous Probability Distributions 连续概率分布Mean and Variance of p ( x ) p(x) p(x) p ( x ) p(x) p(x) 的均值和方差Norm…...

编程日记 2023/8/4 11:02:56

webshell详解

Webshell详解 一、 Webshell 介绍二 、 基础常见webshell案例 一、 Webshell 介绍 概念 webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境&#xff0c;也可以将其称做为一种网页后门。黑客在入侵了一个网站后&#xff0c;通常会将asp或php后门文件与…...

编程日记 2023/8/4 11:01:54

数据结构 | 搜索和排序——搜索

目录 一、顺序搜索 二、分析顺序搜索算法 三、二分搜索 四、分析二分搜索算法 五、散列 5.1 散列函数 5.2 处理冲突 5.3 实现映射抽象数据类型 搜索是指从元素集合中找到某个特定元素的算法过程。搜索过程通常返回True或False&#xff0c;分别表示元素是否存在。有时&a…...

编程日记 2023/8/4 11:00:53

【python】对象

对象 初识对象成员方法类和对象构造方法其它内置方法封装继承类型注释多态综合案例二级目录三级目录 初识对象 设计表格-生产表格-填写表格 对应于程序中&#xff1a;设计类-创建对象-对象属性赋值 class Student:nameNonegenderNone # 基于类创建对象 stu_1Student() stu_2S…...

编程日记 2023/8/4 10:59:52

k8s概念-污点与容忍

k8s 集群中可能管理着非常庞大的服务器&#xff0c;这些服务器可能是各种各样不同类型的&#xff0c;比如机房、地理位置、配置等&#xff0c;有些是计算型节点&#xff0c;有些是存储型节点&#xff0c;此时我们希望能更好的将 pod 调度到与之需求更匹配的节点上。 此时就需要…...

编程日记 2023/8/4 10:58:49

“从零开始学习Spring Boot：构建高效、可扩展的Java应用程序“

标题&#xff1a;从零开始学习Spring Boot&#xff1a;构建高效、可扩展的Java应用程序 简介&#xff1a; Spring Boot是一种用于简化Java应用程序开发的开源框架&#xff0c;它提供了一种快速、高效的方式来构建可扩展的应用程序。本文将介绍如何从零开始学习Spring Boot&…...

编程日记 2023/8/4 10:57:48

通向架构师的道路之tomcat集群

一、为何要集群 单台App Server再强劲&#xff0c;也有其瓶劲&#xff0c;先来看一下下面这个真实的场景。 当时这个工程是这样的&#xff0c;tomcat这一段被称为web zone&#xff0c;里面用springws&#xff0c;还装了一个jboss的规则引擎Guvnor5.x&#xff0c;全部是ws没有se…...

编程日记 2023/8/4 10:56:47

结构体，枚举，联合大小的计算规则

目录 1.结构体大小的计算 补充&#xff08;位段&#xff09; 2.枚举的大小&#xff08;4个字节&#xff09; 3.联合大小的计算 1.结构体大小的计算 &#xff08;1&#xff09;结构体内存对齐的规则 1. 第一个成员在与结构体变量偏移量为 0 的地址处。 2. 其他成员变量要对…...

编程日记 2023/8/4 10:55:46

Vue2 第十七节 Vue中的Ajax

1.Vue脚手架配置代理 2.vue-resource 一.Vue脚手架配置代理 1.1 使用Ajax库 -- axios ① 安装 : npm i axios ② 引入: import axios from axios ③ 使用示例 1.2 解决开发环境Ajax跨域问题 跨域&#xff1a;违背了同源策略&#xff0c;同源策略规定协议名&#xff0…...

编程日记 2023/8/4 10:54:44

ES6 - 字符串新增的一些常用方法

文章目录 0&#xff0c;新增的一些方法1&#xff0c;includes()、startsWith()、endsWith()2&#xff0c;repeat()3&#xff0c;padStart()、padEnd()4&#xff0c;trimStart()、trimEnd()5&#xff0c;replaceAll()6&#xff0c;at() 0&#xff0c;新增的一些方法 介绍一些ES6…...

编程日记 2023/8/4 10:53:43

最新SQLMap安装与入门技术

点击星标&#xff0c;即时接收最新推文 本文选自《web安全攻防渗透测试实战指南&#xff08;第2版&#xff09;》 五折购买链接&#xff1a;u.jd.com/3ibjeF6 SQLMap详解 SQLMap是一个自动化的SQL注入工具&#xff0c;其主要功能是扫描、发现并利用给定URL的SQL注入漏洞。SQLMa…...

编程日记 2023/8/4 10:52:42

Java 使用 Google Guava 实现接口限流

一、引入依赖 <dependency><groupId>com.google.guava</groupId><artifactId>guava</artifactId><version>30.0-jre</version> </dependency>二、自定义注解及限流拦截器 自定义注解&#xff1a;Limiter package com.haita…...

编程日记 2023/8/4 10:51:41

帮助中心的价值是什么？怎样才能在线搭建官网网站帮助中心？

帮助中心&#xff08;Help Center&#xff09;是一个提供公司或组织产品或服务相关信息的在线平台。它的价值在于为用户提供便捷的自助服务和解决问题的渠道&#xff0c;同时也能减轻客服人员的负担。 如何在线搭建官网网站帮助中心的步骤 确定需求&#xff1a;在搭建帮助中心…...

编程日记 2023/8/4 10:50:40

Kubernetes——理论基础

Kubernetes——理论基础 一、Kubernetes 概述1.K8S 是什么&#xff1f;2.为什么要用 K8S?3.Kubernetes 主要功能 二、Kubernetes 集群架构与组件三、Master 组件1.Kube-apiserver2.Kube-controller-manager3.Kube-scheduler4.配置存储中心——etcd 四、Node 组件1.Kubelet2.Ku…...

编程日记 2023/8/4 10:49:39

【VUE3】

Vue 3 是当下最流行的前端框架之一&#xff0c;其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例&#xff1a; 创建 Vue 实例 import { createApp } from vueconst app createApp({data() {return {message: Hello, Vue 3!}} })app.mo…...

编程日记 2023/8/4 10:48:38

《金融数据保护治理白皮书》发布（137页）

温馨提示&#xff1a;文末附完整PDF下载链接 导读 目前业界已出台数据保护方面的治理模型&#xff0c;但围绕金融数据保护治理的实践指导等尚不成熟&#xff0c;本课题围绕数据保护治理的金融实践、发展现状&#xff0c;探索和标准化相关能力要求&#xff0c;归纳总结相关建…...

编程日记 2023/8/4 10:47:36

网络编程（Modbus进阶）

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

编程新知 2025/12/15 5:20:04

HTML前端开发：JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

编程新知 2025/11/10 10:45:11

ios苹果系统，js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

编程新知 2025/12/4 2:37:03

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/12/12 5:43:13

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/11/13 14:22:52

云原生周刊：k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...

编程新知 2025/12/1 3:15:17

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...

编程新知 2025/12/13 0:57:12

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2025/12/7 19:44:50

ArcGIS Pro+ArcGIS给你的地图加上北回归线！

今天来看ArcGIS Pro和ArcGIS中如何给制作的中国地图或者其他大范围地图加上北回归线。 我们将在ArcGIS Pro和ArcGIS中一同介绍。 1 ArcGIS Pro中设置北回归线 1、在ArcGIS Pro中初步设置好经纬格网等&#xff0c;设置经线、纬线都以10间隔显示。 2、需要插入背会归线&#xf…...

编程新知 2025/12/14 4:08:47

leetcode_69.x的平方根

题目如下 &#xff1a; 看到题 &#xff0c;我们最原始的想法就是暴力解决: for(long long i 0;i<INT_MAX;i){if(i*ix){return i;}else if((i*i>x)&&((i-1)*(i-1)<x)){return i-1;}}我们直接开始遍历&#xff0c;我们是整数的平方根&#xff0c;所以我们分两…...

编程新知 2025/12/14 10:06:59