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

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

news 2026/2/10 13:56:50

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，官方有这样一段对Plugin的描述： While loaders are used to transform certai…...

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

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

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

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

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

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

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

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

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

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

【LinearAlgebra】Chapter 12 - Linear Algebra in Probability Statistics

文章目录 Chapter 12 - Linear Algebra in Probability & StatisticsVariance (around athe mean) 方差（接近均值）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等网页文件形式存在的一种命令执行环境，也可以将其称做为一种网页后门。黑客在入侵了一个网站后，通常会将asp或php后门文件与…...

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

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

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

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

【python】对象

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

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

k8s概念-污点与容忍

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

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

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

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

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

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

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

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

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

目录 1.结构体大小的计算补充（位段） 2.枚举的大小（4个字节） 3.联合大小的计算 1.结构体大小的计算 （1）结构体内存对齐的规则 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跨域问题跨域：违背了同源策略，同源策略规定协议名&#xff0…...

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

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

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

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

Java 使用 Google Guava 实现接口限流

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

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

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

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

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

Kubernetes——理论基础

Kubernetes——理论基础一、Kubernetes 概述1.K8S 是什么？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 是当下最流行的前端框架之一，其主要特点是性能更好、体积更小、更易于维护。下面是 Vue 3 的一些重要知识点和代码示例： 创建 Vue 实例 import { createApp } from vueconst app createApp({data() {return {message: Hello, Vue 3!}} })app.mo…...

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

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

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

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

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 （一）实时滤波与参数调整基础滤波操作 60Hz 工频滤波：勾选界面右侧 “60Hz” 复选框，可有效抑制电网干扰（适用于北美地区，欧洲用户可调整为 50Hz）。平滑处理&…...

编程新知 2025/11/19 22:56:53

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日来简单学一下子来一、选择题（可多选） 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘：专注于发现数据中…...

编程新知 2026/1/24 14:15:43

STM32标准库-DMA直接存储器存取

文章目录一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA（Direct Memory Access）直接存储器存取 DMA可以提供外设…...

编程新知 2026/1/26 10:55:51