认识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.rhkb.cn/news/74978.html

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

相关文章

运算放大器(二):恒流源

一、实现原理 恒流源的输出电流能够在一定范围内保持稳定&#xff0c;不会随负载的变化而变化。 通过运放&#xff0c;将输入的电压信号转换成满足一定关系的电流信号&#xff0c;转换后的电流相当一个输出可调的简易恒流源。 二、电路结构 常用的恒流源电路如…

HCIP期中实验

考试需求 1 、该拓扑为公司网络&#xff0c;其中包括公司总部、公司分部以及公司骨干网&#xff0c;不包含运营商公网部分。 2 、设备名称均使用拓扑上名称改名&#xff0c;并且区分大小写。 3 、整张拓扑均使用私网地址进行配置。 4 、整张网络中&#xff0c;运行 OSPF 协议…

Jenkins工具系列 —— 插件 钉钉发送消息

文章目录 安装插件 Ding TalkJenkins 配置钉钉机器人钉钉APP配置项目中启动钉钉通知功能 安装插件 Ding Talk 点击 左侧的 Manage Jenkins —> Plugins ——> 左侧的 Available plugins Jenkins 配置钉钉机器人 点击 左侧的 Manage Jenkins &#xff0c;拉到最后 钉…

数字化时代,如何做好用户体验与应用性能管理

引言 随着数字化时代的到来&#xff0c;各个行业的应用系统从传统私有化部署逐渐转向公有云、行业云、微服务&#xff0c;这种变迁给运维部门和应用部门均带来了较大的挑战。基于当前企业 IT 运维均为多部门负责&#xff0c;且使用多种运维工具&#xff0c;因此&#xff0c;当…

使用socket实现UDP版的回显服务器

文章目录 1. Socket简介2. DatagramSocket3. DatagramPacket4. InetSocketAddress5. 实现UDP版的回显服务器 1. Socket简介 Socket&#xff08;Java套接字&#xff09;是Java编程语言提供的一组类和接口&#xff0c;用于实现网络通信。它基于Socket编程接口&#xff0c;提供了…

无人机管控平台,推动电力巡检管理水平提升

各地区无人机作业水平和管理水平存在参差不齐&#xff0c;电力巡检管理要求与业务发展水平不匹配的问题。同时&#xff0c;巡检数据的存储和管理分散&#xff0c;缺乏有效的整合与共享手段&#xff0c;使得内外业脱节&#xff0c;没有形成统一应用和闭环管理。这就导致巡检数据…

深度学习Redis(2):持久化

前言 在上一篇文章中&#xff0c;介绍Redis的内存模型&#xff0c;从这篇文章开始&#xff0c;将依次介绍Redis高可用相关的知识——持久化、复制(及读写分离)、哨兵、以及集群。 本文将先说明上述几种技术分别解决了Redis高可用的什么问题&#xff1b;然后详细介绍Redis的持…

每日汇评:由于美国就业数据强劲,黄金可能恢复下行趋势

1、美国非农就业数据公布前&#xff0c;金价试图从三周低点反弹&#xff1b; 2、美国经济数据喜忧参半&#xff0c;推动美元和美债收益率回落&#xff1b; 3、金价上行空间有限&#xff0c;因日技术面走势偏空&#xff1b; 金价又将下跌一周&#xff0c;周五有望创下六周以来…

2024年杭电MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段&#xff0c;不少考生开始持续将注意力集中在备考的规划中&#xff01;杭州达立易考教育整合浙江省内的MBA项目信息&#xff0c;为大家详细梳理了相关报考参考内容&#xff0c;方便大家更好完成择校以及针对性的备考工作。本期…

微信小程序 - scroll-view组件之上拉加载下拉刷新(解决上拉加载不触发)

前言 最近在做微信小程序项目中&#xff0c;有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能&#xff0c;遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题&#xff0c;网上很多说给scroll-view设置一个高度啥的就可以解决&#xff0c;有些人设置了…

React Native从文本内容尾部截取显示省略号

<Textstyle{styles.mMeNickname}ellipsizeMode"tail"numberOfLines{1}>{userInfo.nickname}</Text> 参考链接&#xff1a; https://www.reactnative.cn/docs/text#ellipsizemode https://chat.xutongbao.top/

计算机视觉实验:人脸识别系统设计

实验内容 设计计算机视觉目标识别系统&#xff0c;与实际应用有关&#xff08;建议&#xff1a;最终展示形式为带界面可运行的系统&#xff09;&#xff0c;以下内容选择其中一个做。 1. 人脸识别系统设计 (1) 人脸识别系统设计&#xff08;必做&#xff09;&#xff1a;根据…

OC与Swift的相互调用

OC调用Swift方法 1、在 Build Settings 搜索 Packaging &#xff0c;设置 Defines Module 为 YES 2、新建 LottieBridge.swift 文件&#xff0c;自动生成桥 ProductName-Bridging-Header.h 3、在 LottieBridge.swift 中&#xff0c;定义Swift类继承于OC类&#xff0c;声明 obj…

《Kali渗透基础》12. 无线渗透(二)

kali渗透 1&#xff1a;无线协议栈1.1&#xff1a;ifconfig1.2&#xff1a;iwconfig1.3&#xff1a;iw1.4&#xff1a;iwlist 2&#xff1a;无线网卡配置2.1&#xff1a;查看无线网卡2.2&#xff1a;查看信道频率2.3&#xff1a;扫描附近 AP2.4&#xff1a;侦听接口添加与删除 …

超低功耗LCD段码屏驱动显示芯片VK1621原厂芯片

型 号&#xff1a;VK1621 / 品 牌&#xff1a;VINKA/永嘉微电 最新年份 VK1621 是一个324的LCD驱动器&#xff0c;可软体程式控制使其适用于多样化的LCD应用线路&#xff0c;仅用到3至4条信号线便可控制LCD驱动器&#xff0c;除此之外也可介由指令使其進入省电模式 M1855 …

uniapp封装request请求

在基础文件里面创建一个api文件 在创建两个 js文件 http.js 里面封装 request 请求 let baseUrl https://white.51.toponet.cn; //基地址 export const request (options {}) > {//异步封装接口&#xff0c;使用Promise处理异步请求return new Promise((resolve, reject…

如何测出 Scratch 的指令反应时间

相信看了标题&#xff0c;你一定会很吃惊&#xff0c;你会觉得scratch不是没有反应时间吗&#xff1f; 但其实不是&#xff0c;这也是我偶然间发现的&#xff0c;这期的内容较少&#xff0c;对你的技术涨幅很小&#xff0c;但可以当作娱乐来看 其实就7个代码&#xff0c;但看着…

Nginx实现反向代理和负载均衡

Nginx安装 本文章主要介绍下&#xff0c;如何使用Nginx来实现反向代理和负载均衡&#xff0c;Nginx安装和基础知识&#xff0c;可参考我的这篇文章 Nginx安装。 Nginx实现反向代理 实现反向代理需要准备两台Nginx服务器。一台Nginx服务器A&#xff0c;ip为 192.168.206.140&…

Debian/Ubuntu 安装 Chrome 和 Chrome Driver 并使用 selenium 自动化测试

截至目前&#xff0c;Chrome 仍是最好用的浏览器&#xff0c;没有之一。Chrome 不仅是日常使用的利器&#xff0c;通过 Chrome Driver 驱动和 selenium 等工具包&#xff0c;在执行自动任务中也是一绝。相信大家对 selenium 在 Windows 的配置使用已经有所了解了&#xff0c;下…

Agents改变游戏规则,亚马逊云科技生成式AI让基础模型加速工作流

最近&#xff0c;Stability AI正式发布了下一代文生图模型——Stable Diffusion XL 1.0这次的1.0版本是Stability AI的旗舰版生图模型&#xff0c;也是最先进的开源生图模型。 在目前的开放式图像模型中&#xff0c;SDXL 1.0是参数数量最多的。官方表示&#xff0c;这次采用的…