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

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.lryc.cn/news/225241.html

相关文章:

  • CSRF(跨站请求伪造)攻击演示
  • 图解三傻排序 选择排序、冒泡排序、插入排序
  • 【数据结构】树与二叉树(六):二叉树的链式存储
  • 后端Java日常实习生面试(2023年11月10日)
  • 使用iperf3在macOS上进行网络性能测试
  • 09-MySQL主从复制
  • virtualBox虚拟机局域网访问配置
  • IDEA高效编程快捷键
  • nginx实现vue和后端的双机负载
  • ARMday03(寄存器读写、栈、程序状态寄存器、软中断和异常、混合编程)
  • Excel中功能区的存放位置很灵活,可以根据需要隐藏或显示
  • HelloGitHub 社区动态,开启新的篇章!
  • 【学术综述】-如何写出一篇好综述-写好综述要注意的问题
  • ClickHouse介绍和使用
  • 数码管动态扫描
  • Webpack 中 loader 的作用是什么?常用 loader 有哪些?
  • c#,字段和属性的区别
  • ideal一键部署SpringBoot项目jar包到服务器
  • 宝塔部署QQ机器人,提示OpenSSL 1.0.2k-fips 26 Jan 2017
  • K8S篇之简述K8S底层原理
  • 打开ps提示,计算机中丢失d3dcompiler_47.dll怎么解决?
  • torch.mm
  • github遇到想要强制拉取远程仓库内容
  • django+drf+vue 简单系统搭建 (2) - drf 应用
  • 【FastCAE源码阅读7】视图方向切换按钮实现原理
  • 小程序如何设置自取模式下的服务方式
  • 使用数据分析,识别设备异常
  • redis数据倾斜如何解决
  • ATFX汇市:美联储鲍威尔再发鹰派言论,美元指数逼近106关口
  • 【异常----finally和自定义异常】