webpack Plugin Loader
本文作者为 360 奇舞团前端开发工程师
webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。它不仅可以支持ESM和CommonJS模块化编程,而且还可以支持或扩展支持许多不同的静态资源,例如:Files,Images, Fonts, JS, CSS, HTML等。
Plugin
概念
插件 是webpack的支柱功能,它是一个具有apply方法的JavaScript对象。apply方法会被webpack compiler调用,并且插件在其整个生命周期都可以访问到compiler对象,因此他可以hook整个编译的生命周期。
class MyCustomPlugin {apply(compiler) {compiler.hooks.run.tap('MyCustomPluginName',(compilation)=>{console.log('webpack 构建正在启动');})}
}
module.exports = MyCustomPlugin; webpack可以利用plugin来扩展其功能,常用的插件有:
HtmlWebpackPlugin:根据模板生成HTML文件,并自动添加CSS和JS的引用。MiniCssExtractPlugin:将CSS提取为单独的文件,并在HTML中引用它。UglifyJsPlugin:压缩JS代码,减小文件大小,提高加载速度。CleanWebpackPlugin:清空指定目录中的旧文件,防止文件冗余。CopyWebpackPlugin:复制指定目录中的文件到输出目录中。DefinePlugin:定义全局常量,方便在JS中使用。ProvidePlugin:自动加载模块,无需在JS文件中导入。HotModuleReplacementPlugin:开启模块热替换功能,支持修改代码后自动刷新页面。IgnorePlugin:忽略指定模块,减小文件大小,提高打包速度。BundleAnalyzerPlugin:生成打包报告,分析项目中各个模块的大小和依赖关系。
使用
以下是一个基于HtmlWebpackPlugin的示例工程,主要展示插件的基本使用,帮助理解插件的扩展能力:
最终执行编译后只会输出dist/main.js没有.html文件;此时我们可以引入插件HtmlWebpackPlugin,来生成.html代码并且自动引入编译后的js bundle,它的安装如下:
npm install --save-dev html-webpack-plugin 配置与最终结果如下图:
Loader
概念
loader用于对模块的源代码转换,它相当于编译期间的一个任务。起初webpack只理解javaScript文件,但是webpack将每个作为模块导入的文件视为依赖项,并将其添加到依赖关系图中。因此为了处理静态资源的导入,例如:Files,Images, Fonts, CSS, Json等,webpack使用Loader来将这些文件加载到bundle中。常用的loader:
babel-loader:将ES6及以上版本的JavaScript代码转换成ES5及以下的版本,以保证兼容性。css-loader:处理CSS文件中的url()等引用外部文件的语法,并将CSS代码转换为Webpack可以处理的模块。file-loader:将文件复制到输出目录,并返回文件的URL地址。url-loader:类似于file-loader,但是可以将文件转换为Base64编码的Data URL,减少HTTP请求。style-loader:将CSS代码以<style>标签的形式插入到HTML文件中。sass-loader:处理Sass/Scss代码,并将其转换为CSS代码。less-loader:处理Less代码,并将其转换为CSS代码。json-loader:处理JSON格式的文件,并将其转换为JavaScript对象。xml-loader:处理XML格式的文件,并将其转换为JavaScript对象。raw-loader:将文件内容以字符串的形式导出。
使用
基于上述插件的示例工程,我们为其加入CSS代码,来展示如何使用Loader转换CSS。
一切准备就绪,执行打包脚本,发现报错:You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file。
为了能够导入CSS,我们需要安装style-loader和css-loader,并在module.rules下配置这些loader:
npm install --save-dev style-loader css-loader 具体配置如下图:
重新打包后,浏览器运行index.html,会发现css样式生效了。
不过需要注意的是 导入css文件,应保证 loader 的先后顺序:style-loader 在前,而 css-loader 在后。否则webpack可能会抛出错误。这是因为loader 可以链式调用, 链中的每个 loader 都将对资源进行依次转换和传递。只需保证webpack链中的最后一个loader返回javaScript即可。
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

相关文章:
webpack Plugin Loader
本文作者为 360 奇舞团前端开发工程师 webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。它不仅可以支持ESM和CommonJS模块化编程,而且还可以支持或扩展支持许多不同的静态资源,例如:Files,I…...
关闭eslint - vue篇
文章目录 一、问题描述二、问题解决1、首先是比较旧的vue项目2、创建项目的时候,不要选eslint3、如果你使用的编辑软件是webstorm4、创建的项目没有webpack.base.conf.js文件,但是有 .eslintrc.js5、比较新的vue项目,目录没有(直接…...
XXL-SSO简要说明
一、介绍 XXL-SSO 是一个分布式单点登录框架。只需要登录一次就可以访问所有相互信任的应用系统。 拥有”轻量级、分布式、跨域、CookieToken均支持、WebAPP均支持”等特性。现已开放源代码,开箱即用。 官方文档 二、集成 2.1、源码下载 下载地址 2.2、代码结构…...
HC-05蓝牙模块的使用
我最近刚刚开始学习嵌入式,在第一次使用蓝牙模块HC-05的时候遇到了很多问题, 甚至连接线都不会,因此下面我会十分详细地介绍我一步一步探索的步骤,直到完成使用手机APP和51单片机收发数据。 调试步骤 首先,我们需要明…...
初始python
初始python 缘由 对于python,相比大家并不陌生,Python是一种高级的、解释性编程语言,它具有简洁的语法和强大的内置函数,适用于广泛的应用领域,例如运维,Web开发,数据科学,人工智能等。Pyt…...
C++入门预备语法
C入门预备语法 C关键字命名空间C输入&输出初步缺省参数函数重载引用内联函数auto和范围for(C11)指针空值nullptr C关键字 命名空间 命名空间是一种将变量名、函数名、类名和库名称等封装到一个命名空间域中,与其他域的同名量相隔离&…...
python发送email
通过第三方SMTP发送纯文本邮件 #!/usr/bin/python -- coding: UTF-8 -- import smtplib from email.mime.text import MIMEText from email.header import Header 第三方 SMTP 服务 mail_host“smtp.XXX.com” #设置服务器 mail_user“XXXX” #用户名 mail_pass“XXXXXX” …...
软件测试面试题自动化面经分享——这才是高薪的秘诀!
Hello,你们的好朋友来了!今天猜猜我给大家带来点啥干货呢?最近很多小伙伴出去面试的时候经常会被问到跟自动化测试相关的面试题。所以,今天特意给大家整理了一些经常被公司问到的自动化测试相关的面试题。停,咱先收藏起…...
Ceph入门到精通-Centos8安装prometheus
普罗米修斯是一个开源的监控、查询和警报工具。最初由Soundcloud于2012年构建,功能丰富的工具已被多家公司采用,用于监控其IT基础架构并确保所有系统平稳运行。Prometheus 允许您通过 HTTP 协议查询和提取时间序列指标,例如 CPU 和内存利用率,并在实时图表上可视化它们。您…...
把树莓派改造成无线网卡(3)-----共享无线网络,无线网络转换成有线网络,让有线网络设备连上无线网络
本文目录 1、准备工作2、安装DNS和配置管理软件3、设置网络路由功能3.1、树莓派的有线网络接口IP配置3.2、启用路由和IP伪装3.3、为有线网络配置DHCP和DNS服务 4、运行5、进阶--将二个以太网口加入到同一个网桥 现在的无线路由器非常便宜,所以实际上除了有特殊的要求…...
NumPy
目录 1、NumPy简介 2、利用元组、列表创建多维数组 3、数组索引 4、数组裁切 4.1、一维数组操作 4.2、二维数组操作 5、数据类型 6、副本/视图 7、数组形状 8、数组重塑 9、多维数组的迭代 10、数组连接 10.1、使用concatenate() 函数进行数组连接 10.2、使用堆栈…...
C++17完整导引-模板特性之类模板参数推导
模板特性之类模板参数推导 使用类模板参数推导默认以拷贝方式推导推导lambda的类型没有类模板部分参数推导使用类模板参数推导代替快捷函数 推导指引使用推导指引强制类型退化非模板推导指引推导指引VS构造函数显式推导指引聚合体的推导指引标准推导指引pair和tuple的推导指引从…...
CSS3小可爱亲吻表白特效,给你的五一假期增添点小乐趣
马上五一假期了,小伙伴们是不是都准备出去旅游呢,或者回老家陪陪父母。今天我用CSS3制作一个小可爱亲吻表白的特效,来给你即将到来的五一假期增添点小小的乐趣。 目录 实现思路 左边小可爱的实现 右边小可爱的实现 左右摇摆动效的实现 右…...
Samba CentOS 7 安装
安装步骤 Samba是在Linux与Windows系统间共享文件和打印机的标准协议。要在CentOS上安装Samba,可以按以下步骤操作: 安装Samba相关包: yum install samba samba-client samba-common创建Samba配置文件/etc/samba/smb.conf: vim /etc/samba/smb.conf添加如下配置: [global]…...
Mac电脑 Vscode : Flutter 开发环境搭建(最细节教程)
参考链接: MacVSCode安装flutter环境_mac vscode配置flutter_GalenWu的博客-CSDN博客 mac搭建Flutter环境以及初始化项目 - 简书 注意: *下载xcode 就包含git了, *苹果芯片和intel 芯片需要的环境不同,苹果芯片需要安装: Im…...
BEVFormer 论文学习
1. 解决了什么问题? 3D 视觉感知任务,包括基于多相机图像的 3D 目标检测和分割,对于自动驾驶系统非常重要。与基于 LiDAR 的方法相比,基于相机图像的方法能够检测到更远距离的目标,识别交通信号灯、交通标识等信息。有…...
现在的00后,实在是太卷了,我们这些老油条都想辞职了......
现在的小年轻真的卷得过分了。前段时间我们公司来了个00年的,工作没两年,跳槽到我们公司起薪20K,都快要超过我了。 后来才知道人家是个卷王,从早干到晚就差搬张床到工位睡觉了。 最近和他聊了一次天,原来这位小老弟家…...
shell 数组定义与使用
一维数组 数组定义 array_name(value1 value2 ... value)也可以使用数字下表来定义数组 array_name[0]value0 array_name[1]value1 array_name[2]value2读取数组 ${array_name[index]}实例1 [rootiZj6c3slqbp8xuu2w3i4roZ devops]# cat array_name.sh #!/usr/bin/bashmy_…...
24 KVM管理虚拟机-配置VNC-TLS登录
文章目录 24 KVM管理虚拟机-配置VNC-TLS登录24.1 概述24.2 操作步骤 24 KVM管理虚拟机-配置VNC-TLS登录 24.1 概述 VNC服务端和客户端默认采用明文方式进行数据传输,因此通信内容可能被第三方截获。为了提升安全性,openEuler支持VNC服务端配置TLS模式进…...
C++基础讲解第六期(多态、虚函数、虚析构函数、dynamic_cast、typeid纯虚函数)
C基础讲解第六期 代码中也有对应知识注释,别忘看,一起学习! 一、多态1. 问题引出2. 多态的概念和使用3. 多态的原理4. 虚析构函数5. 动态类型识别(dynamic_cast)(1) 自定义类型(2). dynamic_cast(3). typeid 6. 纯虚函数 纯虚函数需要补充 一…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来,Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Appium+python自动化(十六)- ADB命令
简介 Android 调试桥(adb)是多种用途的工具,该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具,其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利,如安装和调试…...
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上,开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识,在 vs 2017 平台上,进行 ASP.NET 应用程序和简易网站的开发;初步熟悉开发一…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
python如何将word的doc另存为docx
将 DOCX 文件另存为 DOCX 格式(Python 实现) 在 Python 中,你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是,.doc 是旧的 Word 格式,而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决
Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中,新增了一个本地验证码接口 /code,使用函数式路由(RouterFunction)和 Hutool 的 Circle…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
TSN交换机正在重构工业网络,PROFINET和EtherCAT会被取代吗?
在工业自动化持续演进的今天,通信网络的角色正变得愈发关键。 2025年6月6日,为期三天的华南国际工业博览会在深圳国际会展中心(宝安)圆满落幕。作为国内工业通信领域的技术型企业,光路科技(Fiberroad&…...
