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

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

1、plugin 的作用

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

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

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

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

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

javascript 复制代码
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:忽略部分文件;

相关推荐
萌萌哒草头将军3 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
小彭努力中4 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
浪裡遊5 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
LinDaiuuj5 小时前
判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例
开发语言·前端·javascript
敲厉害的燕宝5 小时前
Pinia——Vue的Store状态管理库
前端·javascript·vue.js
Aphasia3115 小时前
react必备JavaScript知识点(二)——类
前端·javascript
玖玖passion5 小时前
数组转树:数据结构中的经典问题
前端
呼Lu噜5 小时前
WPF-遵循MVVM框架创建图表的显示【保姆级】
前端·后端·wpf
珠峰下的沙砾5 小时前
Vue3 里 CSS 深度作用选择器 :global
前端·javascript·css
航Hang*5 小时前
WEBSTORM前端 —— 第2章:CSS —— 第3节:背景属性与显示模式
前端·css·css3·html5·webstorm