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

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

news 2025/12/16 0:16:53

目录

  • 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

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

系统设计 --- MongoDB亿级数据查询优化策略

系统设计 --- MongoDB亿级数据查询分表策略 背景Solution --- 分表 背景 使用audit log实现Audi Trail功能 Audit Trail范围: 六个月数据量: 每秒5-7条audi log&#xff0c;共计7千万 – 1亿条数据需要实现全文检索按照时间倒序因为license问题&#xff0c;不能使用ELK只能使用…...

编程新知 2025/11/30 16:55:20

Python爬虫（二）：爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

编程新知 2025/10/19 5:48:51

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/10/28 23:14:00

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

编程新知 2025/12/2 3:35:50

管理学院权限管理系统开发总结

文章目录 &#x1f393; 管理学院权限管理系统开发总结 - 现代化Web应用实践之路&#x1f4dd; 项目概述&#x1f3d7;️ 技术架构设计后端技术栈前端技术栈 &#x1f4a1; 核心功能特性1. 用户管理模块2. 权限管理系统3. 统计报表功能4. 用户体验优化 &#x1f5c4;️ 数据库设…...

编程新知 2025/10/23 14:10:35

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

编程新知 2025/12/12 10:32:08

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/12/13 8:47:33

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

编程新知 2025/11/18 18:31:30