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

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

news 2025/6/21 8:11:27

目录

  • 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

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/6/21 5:38:34

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/6/15 14:05:35

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/6/17 4:44:36

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

编程新知 2025/6/18 3:27:10

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/6/19 16:21:36

如何在网页里填写 PDF 表格？

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

编程新知 2025/6/15 11:17:03

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/6/21 5:26:27

BLEU评分：机器翻译质量评估的黄金标准

BLEU评分&#xff1a;机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域&#xff0c;衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标&#xff0c;自2002年由IBM的Kishore Papineni等人提出以来&#xff0c;…...

编程新知 2025/6/16 13:23:09

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/6/15 23:12:19

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/6/17 5:14:39