Webpack 中 Plugin 的作用是什么?常用 plugin 有哪些?

说说webpack中常见的Plugin?解决了什么问题?- 题目详情 - 前端面试题宝典

1、plugin 的作用 

Plugin 是一种计算机应用程序,它和主应用程序互相交互,以提供特定的功能

是一种遵循一定规范的应用程序接口编写出来的程序,只能运行在程序规定的系统下,因为其需要调用原纯净系统提供的函数库或者数据。

webpack 中的 plugin 也是如此,plugin 赋予其各种灵活的功能,例如打包优化、资源管理、环境变量注入等,它们会运行在 webpack 的不同阶段(钩子 / 生命周期),贯穿了 webpack 整个编译周期。

目的在于解决 loader 无法实现的其他事。

配置方式:一般情况,通过配置文件导出对象中 ​​​​​​​plugins ​​​​​​​属性传入 ​​​​​​​new 实例对象。如下所示:

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 访问内置的插件
module.exports = {...plugins: [new webpack.ProgressPlugin(),new HtmlWebpackPlugin({ template: './src/index.html' }),],
};

2、常见的 Plugin

html-webpack-plugin简化 HTML 文件创建 (依赖于 html-loader);

在打包结束后,⾃动生成⼀个 html 文件,并把打包生成的 js 模块引⼊到该 html 中

mini-css-extract-plugin分离样式文件,将 CSS 提取到单独的⽂件中,⽀持按需加载载

(替代extract-text-webpack-plugin); 

uglifyjs-webpack-plugin:通过 UglifyES 压缩 ES6 代码,不支持 ES6 压缩 (Webpack4 以前);

terser-webpack-plugin: 支持压缩 ES6 代码(Webpack4);

webpack-bundle-analyzer可视化 webpack 输出文件的体积;

optimize-css-plugin:压缩 CSS;

copy-webpack-plugin:复制文件或目录到执行区域;

如 Vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中 

define-plugin定义环境变量;

允许在编译时创建配置的全局对象; (Webpack4 之后指定 mode 会自动配置)

是一个 webpack 内置的插件,不需要安装 

webpack-parallel-uglify-plugin:多核压缩,提高压缩速度(多进程执行代码压缩,提升构建速度

并行压缩 JavaScript 代码,提高构建速度,特别是在大型项目中。

clean-webpack-plugin: 删除(清理)构建目录;

ignore-plugin:忽略部分文件;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/162747.html

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

相关文章

【大模型应用开发教程】04_大模型开发整体流程 基于个人知识库的问答助手 项目流程架构解析

大模型开发整体流程 & 基于个人知识库的问答助手 项目流程架构解析 一、大模型开发整体流程1. 何为大模型开发定义核心点核心能力 2. 大模型开发的整体流程1. 设计2. 架构搭建3. Prompt Engineering4. 验证迭代5. 前后端搭建 二、项目流程简析步骤一:项目规划与…

模拟IC经典面试题目及答案汇总,这些经典题目你刷到过几个?

有不少小伙伴说还想要更多模拟IC方向的面试题目,这不就来了!(文末可领全部面试题目) 请描述一下 CMOS 的工艺流程 1)光刻形成 well 阱区:在 p 型硅衬底上生长一层氧化层,涂光刻胶&#xff0c…

骨骼动画详解

【物体怎么样是在动】 当物体的位置、朝向、大小即Transform有任意一者发生变化时,物体在动。 但变化要达到一定的幅度时,我们会看到物体在动,幅度是多少却决于我们看这个物体的距离、方向,物体的朝向等因素。 这里说的幅度是指…

一文学会Scala【Scala一站式学习笔记】

文章目录 为什么要学习Scala语言什么是Scala如何快速掌握Scala语言Scala环境安装配置Scala命令行 Scala的基本使用变量数据类型操作符if 表达式语句终结符循环高级for循环 Scala的集合体系集合SetListMapArrayArrayBuffer数组常见操作Tuple总结 Scala中函数的使用函数的定义函数…

unittest 统计测试执行case总数,成功数量,失败数量,输出至文件,生成一个简易的html报告带饼图

这是一个Python的单元测试框架的示例代码,主要用于执行测试用例并生成测试报告。其中,通过unittest模块创建主测试类MainTestCase,并加载其他文件中的测试用例,统计用例的执行结果并将结果写入文件,最后生成一个简单的…

RISC-V处理器设计(四)—— Verilog 代码设计

一、前言 从6月底刚开始接触 risc-v 架构,到现在完成了一个 risc-v cpu 的设计,并且成功移植了 rt-thread nano 到本 cpu 上运行,中间经过了 4个多月的时间,遇到了数不清的问题,也想过放弃,但好在最后还是…

RT-Thread 10. 使用keil4编译GD32F450

1. 修改keil路径 2.增加MCU型号宏定义 3. 在ENV界面输入 scons -c scons --targetmdk44. 编译 scons --verbose提示错误 Warning: L6310W: Unable to find ARM libraries. Error: L6411E: No compatible library exists with a definition of startup symbol __main. Finish…

VSCode 连接不上 debian 的问题

之前一台笔记本上安装了 debian12,当时用 vscode 是可以连接上的,但今天连接突然就失败了,失败信息是这样的: 查看失败信息 因为 debian 是自动获取 ip 地址的,以前能连接上时,ip 地址是 104,然…

思维模型 首因效应

本系列文章 主要是 分享 思维模型,涉及各个领域,重在提升认知。先入为主,一见钟情。 1 首因效应的应用 1.1 面试中的首因效应 小李是一名应届毕业生,他准备参加一家知名互联网公司的面试。在面试前,他做了充分的准备…

“第六十二天”

新东西 %[^\n] 这个题测试的时候不知道哪里为什么一直错一个。 int main() {char a[81] { 0 };fgets(a, 80, stdin);int i 0;int n strlen(a);for(i0;i<n;i){if ((a[i] > a && a[i] < y) || (a[i] > A && a[i] < Y))a[i] 1;else if (a[i…

3BHE022291R0101 PCD230A 专注于制造卓越人工智能

3BHE022291R0101 PCD230A 专注于制造卓越人工智能 BISTelligence是BISTel的一个分支&#xff0c;BISTel是为全球半导体和FPD制造商提供工程和软件自动化产品的领先供应商。半导体产品集团上个月被卖给了新思科技。在出售给Synopsys之后&#xff0c;Bisetlliegnce成立了两个部门…

Centos 7.x上利用certbot申请Let‘s Encrypt的SSH证书(HTTPS证书)

目录 01-安装Certbot02-在网站的根目录依次新建文件夹.well-known和acme-challenge03-申请证书 要在CentOS 7.x上为域名申请Let’s Encrypt证书&#xff0c;你可以使用Certbot工具&#xff0c;它是一个自动化证书颁发工具&#xff0c;用于管理Let’s Encrypt证书。以下是在Cent…