webpack中常见的Plugin?解决了什么问题?

一、是什么

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

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

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' }),],
};

二、特性

其本质是一个具有apply方法javascript对象

apply 方法会被 webpack compiler 调用,并且在整个编译生命周期都可以访问 compiler 对象

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';class ConsoleLogOnBuildWebpackPlugin {apply(compiler) {compiler.hooks.run.tap(pluginName, (compilation) => {console.log('webpack 构建过程开始!');});}
}module.exports = ConsoleLogOnBuildWebpackPlugin;

 

compiler hook 的 tap 方法的第一个参数,应是驼峰式命名的插件名称

关于整个编译生命周期钩子,有如下:

  • entry-option :初始化 option
  • run
  • compile: 真正开始的编译,在创建 compilation 对象之前
  • compilation :生成好了 compilation 对象
  • make 从 entry 开始递归分析依赖,准备对每个模块进行 build
  • after-compile: 编译 build 过程结束
  • emit :在将内存中 assets 内容写到磁盘文件夹之前
  • after-emit :在将内存中 assets 内容写到磁盘文件夹之后
  • done: 完成所有的编译过程
  • failed: 编译失败的时候

三、常见的Plugin

常见的plugin有如图所示:

下面介绍几个常用的插件用法:

HtmlWebpackPlugin

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

npm install --save-dev html-webpack-plugin
// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {plugins: [new HtmlWebpackPlugin({title: "My App",filename: "app.html",template: "./src/html/index.html"}) ]
};

 

<!--./src/html/index.html-->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body><h1>html-webpack-plugin</h1>
</body>
</html>

在 html 模板中,可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

更多的配置可以自寻查找

clean-webpack-plugin

删除(清理)构建目录

npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {plugins: [...,new CleanWebpackPlugin(),...]
}

mini-css-extract-plugin

提取 CSS 到一个单独的文件中

npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {module: {rules: [{test: /\.s[ac]ss$/,use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader", "sass-loader"],},],},plugins: [new MiniCssExtractPlugin({ filename: "[name].css" })],
};

DefinePlugin

允许在编译时创建配置的全局对象,是一个webpack内置的插件,不需要安装

const { DefinePlugun } = require("webpack");
module.exports = { plugins: [new DefinePlugin({ BASE_URL: '"./"' })] };

copy-webpack-plugin

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

npm install copy-webpack-plugin -D
new CopyWebpackPlugin({parrerns: [{ from: "public", globOptions: { ignore: ["**/index.html"] } }],
});

复制的规则在patterns属性中设置:

  • from:设置从哪一个源中开始复制

  • to:复制到的位置,可以省略,会默认复制到打包的目录下

  • globOptions:设置一些额外的选项,其中可以编写需要忽略的文件

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

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

相关文章

Flask学习(五):flask中添加装饰器

一、注意装饰器函数所在的位置&#xff1a; 代码示例如下&#xff1a; from flask import Flaskapp Flask(__name__)def wapper(func):def inner(*args, **kwargs):print("执行了装饰器")return func(*args, **kwargs)return innerwapper app.route("/index1…

CTF题型 匿名函数考法例题总结

CTF题型 匿名函数考法&例题总结 文章目录 CTF题型 匿名函数考法&例题总结一 .原理分析二 .重点匿名函数利用1.create_function()如何实现create_function代码注入 2.array_map()3.call_user_func()4.call_user_func_array()5.array_filter() 三.例题讲解1.[Polar 靶场 …

【WEB3安全基建项目Secwarex】空投指南

GoPlusSecurity是WEB3安全基建项目&#xff0c;3月8日完成400万美元的私募融资&#xff0c;目前总融资已经高达1500万美元&#xff0c;其中包括Binance Labs、Huobi Incubator、Kucoin Ventures、Avalanche等知名机构参投。 1、打开网址&#xff1a;secwarex.io&#xff0c;点…

【考研数学】武忠祥全年各阶段用书搭配

正常来说&#xff0c;你已经跟了武忠祥老师&#xff0c;那武老师的高数辅导讲义和严选题&#xff0c;应该你都有入手了&#xff0c;这个时候你再加一本1800&#xff0c;如何能够保证有充分的时间&#xff0c;将这些习题册做透&#xff0c;将它们的最大作用发挥出来呢&#xff0…

Vue3 v-model的使用

简介 使用场景&#xff1a;1 用于表单input、textarea以及select元素上创建双向数据绑定 2 用于组件间数据的通信 一个小栗子&#xff0c;第一个使用场景的代码 <template><div class"box"><div class"intro"><el-input v…

【C++】仿函数优先级队列反向迭代器

目录 一、优先级队列 1、priority_queue 的介绍 2、priority_queue 的使用 3、 priority_queue 的模拟实现 1&#xff09;priority_queue()/priority_queue(first, last) 2&#xff09;push&#xff08;x&#xff09; 3&#xff09;pop&#xff08;&#xff09; 4&#…

Vue+Element-UI Table表格实现复选框单选效果(隐藏表头上的全选Checkbox)

实现效果 完整代码 <div class"box-pos"><el-table ref"table" :header-cell-style"{ color: #FFF, background: #333 }":cell-style"{ color: #FFF, background: #333 }" :data"grListData" style"width: 1…

前端知识点03(JS)

文章目录 前端知识点03&#xff08;JS&#xff09;1、JS中this指向问题2、script中的async和defer的区别3、setTimeOut和setInterval4、Es6和ES5的区别5、ES6的新特性 &#x1f389;写在最后 前端知识点03&#xff08;JS&#xff09; hello hello~ &#xff0c;这里是 code袁~&…

python日常刷题(一)

前言&#xff1a;本文记录2024年3月11日至2024年3月19日牛客网所做的基础题目&#xff08;错题本&#xff09;&#xff1a; &#x1f3ac;个人简介&#xff1a;努力学习ing &#x1f4cb;本专栏&#xff1a;python日常刷题 &#x1f380;CSDN主页&#xff1a;愚润求学 文章目录…

软件的安装与卸载(YUM)

YUM&#xff1a;yum 是一个方便的"应用商店"&#xff0c;你可以通过它轻松地安装、更新和删除软件包&#xff0c;就像从应用商店中下载和安装应用程序一样。&#xff08;这个得用root身份&#xff0c;普通用户权限不够&#xff09; 常用命令&#xff1a; 1.安装软件…

路径优化算法 | matlab遗传算法多配送中心路径优化

在MATLAB中使用遗传算法来解决多配送中心路径优化问题,通常涉及到复杂的组合优化问题。多配送中心路径优化问题(也称为车辆路径问题,Vehicle Routing Problem with Multiple Depots, VRPMD)是旅行商问题(TSP)的扩展,其中存在多个配送中心,每个配送中心有一定数量的车辆…

工作需求ElementUi组件的使用

加油&#xff0c;新时代打工人&#xff01; 组件源码 <template><div mouseenter"mousein true" mouseleave"mousein false"><el-input type"text" clearable autocomplete"off" v-model"searchDoc.originName…

7.安全性基础知识

主要议题&#xff1a; 安全防护体系&#xff1a;7层次&#xff0c;要记7层次的名称以及这些层次与哪些方面相关&#xff1b; 安全保护等级&#xff1a;5等级&#xff0c;要记5等级安全性的高低排序&#xff0c;掌握每个等级的特点&#xff1b; 用户认证机制&#xff1a;用户认…

[小程序开发] npm

一、自定义构建npm 1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。 "miniprogramRoot": "miniprogram/", 2、在project.config.json文件中的setting.packNpmManually为true&#xff0c;开启自定义node_modules和minip…

bert源码分析之tokenization

import collections# 集合模块 import re# 正则模块 import unicodedata#判断字符类别模块 import six#判断版本 import tensorflow as tf # 用于检查传入的参数do_lower_case和真正的模型是否一致 # do_lower_case: 一个布尔值&#xff0c;表示是否将文本转换为小写 # init_ch…

python网络爬虫实战教学——urllib的使用(2)

文章目录 专栏导读1、前言2、URLError3、HTTPError4、urlparse5、urlunparse 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对…

牛客刷题 | HJ68 成绩排序, HJ69 矩阵乘法,HJ70 矩阵乘法计算量估算

HJ68 成绩排序 题目链接 思路建立字典&#xff0c;key代表名字&#xff0c;value为数字&#xff0c;最后sorted函数按规定排序。注意名单中的名字会重名&#xff0c;所以key应该是名字加上编号&#xff0c;以免同名的分数被覆盖。将编号填充为3位数&#xff0c;方便最后输出名…

第1章 数据管理

思维导图 1.1 引言 从数据中获取的价值不可能凭空产生或依赖于偶然&#xff0c;需要有目标、规划、协作、和保障&#xff0c;也需要管理和领导力。定义&#xff1a; 数据管理是为了交付、控制、保护并提升数据和信息资产的价值&#xff0c;在其整个生命周期中制定计划、制度、…

【Web】浅聊Hessian反序列化原生jdk利用与高版本限制绕过

目录 前言 原理分析 EXP Hessian2 低版本 直接Runtime命令执行 Hessian2 高版本 利用Unsafe加载恶意字节码二次调用触发初始化 利用TemplatesImpl实例化恶意类 jdk高版本打JNDI 前文&#xff1a;【Web】浅聊Hessian异常toString姿势学习&复现 前言 上篇文章介绍…

mysql笔记:23. 在Mac上安装与卸载MySQL

文章目录 下载MySQL安装包1. 打开MySQL官网&#xff0c;点击DOWNLOADS2. 点击GPL Downloads3. 点击MySQL Community Server打开下载页面4. 选择需要的文件进行下载5. ARM or x86 DMGbrewTAR卸载1. 在系统中卸载2. 在终端中卸载 MySQL对Mac电脑的适配十分强大&#xff0c;再加上…