webpack-Plugin(插件)的使用

最新推荐文章于 2024-06-07 11:39:45 发布
最新推荐文章于 2024-06-07 11:39:45 发布
阅读量804 收藏 11
点赞数 19
分类专栏： 程序员 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84092542/article/details/137500368
版权
本文介绍了webpack中的Plugin与Loader的区别，详细阐述了Plugin的使用过程，包括添加版权、打包HTML和JS压缩的具体操作。通过实例展示了如何使用BannerPlugin、HtmlWebpackPlugin和压缩插件，帮助前端开发者更好地理解和应用webpack插件。
摘要由CSDN通过智能技术生成
loader和plugin区别

  • loader主要用于转换某些类型的模块，它是一个转换器。

  • plugin是插件，它是对webpack本身的扩展，是一个扩展器。

plugin的使用过程：

  • 步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)

  • 步骤二：在webpack.config.js中的plugins中配置插件。

应用
添加版权的plugin

  • 我们先来使用一个最简单的插件，为打包的文件添加版权声明

  • 该插件名字叫BannerPlugin，属于webpack自带的插件。

  • 按照下面的方式来修改webpack.config.js的文件：

最低0.47元/天 解锁文章
2401_84092542
关注
  • 19
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的基本使用（内含plugins插件）
m0_69674158的博客
08-15 565
webpack的概念和基本使用，含pluins插件
【Webpack】1065- 手把手带你入门Webpack Plugin
pingan8787
08-30 157
关于 Webpack在讲 Plugin 之前，我们先来了解下Webpack。本质上，Webpack是一个用于现代 JavaScript 应用程序的静态模块打包工具。它能够解析我们的代码...
Vue实现预渲染—@prerenderer/webpack-plugin
最新发布
weixin_53797856的博客
06-07 419
前段时间，用Vue框架给公司做了个官网，以为做出来就完事了？不不不，老板开会再三强调要做好SEO优化工作，我说已经加了标题、关键词、描述这些，哒咩，老板说这是基本的，的进一步去做SEO优化，让搜索引擎能够抓取到网页信息。那么紧接着问题就来了。
总结18个 webpack 插件，总会有你想要的！
程序员成长指北
04-10 295
转自：掘金 - lzg9527https://juejin.cn/post/6844904193589772301何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定...
推荐使用：git-revision-webpack-plugin——为你的Webpack构建添加Git版本信息
gitblog_00045的博客
05-24 440
推荐使用：git-revision-webpack-plugin——为你的Webpack构建添加Git版本信息 项目地址:https://gitcode.com/pirelenito/git-revision-webpack-plugin 在开发Web应用时，保持代码库的版本控制是至关重要的。为此，我们向您推荐一款强大的Webpack插件——git-revision-webpack-plugin。...
使用htmlWebpackPlugin添加代码版本信息
qq_43119912的博客
08-02 714
不知道你是不是这样的场景哈，或者曾经是。你提交完代码、部署然后测试去测，测试说你这个bug改了吗，怎么还是一样？然后你就纳闷，改过了啊代码也提交了，然后你自己去点一遍验证提交的代码有没有部署上去。这是一个痛点，可能也都习惯了哈，其实，这里有个很好很简单的方式去解决这个问题。这样子打包部署后，index.html里就有相应信息了，看代码有没有部署上去直接点控制台Elements看这里就能知道了。......
purgecss-webpack-plugin：用于Webpack的Purgecss插件
02-04
`purgecss-webpack-plugin`可以与其他Webpack插件如`MiniCssExtractPlugin`一起使用，以配合CSS模块化和提取。例如，`MiniCssExtractPlugin`可以将CSS提取为单独的文件，而`purgecss-webpack-plugin`则负责清理未...
html-webpack-externals-plugin：与html-webpack-plugin一起使用以使用预先打包的供应商捆绑包的Webpack插件
02-06
这个插件非常简单，只是封装了另外两个Webpack插件来完成繁重的工作。 它： 在运行时修改Webpack配置，以将供应商模块添加到属性。 运行将您的供应商模块资产复制到输出路径。 运行将您的供应商模块捆绑包添加到...
babel-minify-webpack-plugin：[已弃用] Babel Minify Webpack-plugin
01-30
用于 minify的Webpack插件-基于babel的压缩程序 安装 npm install babel-minify-webpack-plugin --save-dev 用法 // webpack.config.js const MinifyPlugin = require ( "babel-minify-webpack-plugin" ) ; module ....
html-webpack-tags-plugin:让您定义要使用html-webpack-plugin注入的html标签
05-01
对于旧版本的webpack和node，请使用此插件的2.x版本。 该插件以前称为html-webpack-include-assets-plugin 。 对于低于8.6的Node版本，请安装 动机 当使用诸如您可能会将资产输出到html-webpack-plugin未检测/...
详解webpack的clean-webpack-plugin插件报错
01-18
const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__...
webpack-deadcode-plugin：Webpack插件，用于检测未使用的文件和已使用文件中的未使用导出
02-06
Webpack Deadcode插件 Webpack插件可检测未使用的文件和已使用文件中的未使用导出 安装 通过npm： $ npm install webpack-deadcode-plugin --save-dev 通过纱： $ yarn add -D webpack-deadcode-plugin 用法 该插件将向您的终端报告未使用的文件和未使用的导出，但这些都不属于您的webpack构建过程，因此，它不会使您的构建失败（警告您）。 简单添加到您的webpack配置中，如下所示： :writing_hand: 如果使用babel-loader ，则必须设置modules: false使其起作用 # i
利用webpack的DefinePlugin插件实现版本号的可视化
qq_38774121的博客
02-26 1101
利用webpack的DefinePlugin插件实现版本号的可视化 原因：项目中，每次发一次版本，服务器更新都挺慢的，为了区别每一次版本是否发版成功，在webpack当中进行配置，以达到版本的可视化操作       首先在webpack.dev.conf.js 和 webpack.prod.config.js当中,因为我们是使用插件...
webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
weixin_34148340的博客
08-07 228
       Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 它的异步加载原理是，事先将编译好后的静态文件，通过js对象映射，硬编码进打包后的 manifest.xxxx.js 文件中，然后通过JSONP原理按需加载每个chunk。 每个子模块加载完毕之后，浏览器将会进行本地缓存，从而节省了网络带宽。 　　W...
js加版本号 webpack_webpack设置版本号和处理成单独的文件
weixin_31362539的博客
01-12 210
前言：webpack4 开始使用： mini-css-extract-plugin插件, 1-3 的版本可以用： extract-text-webpack-plugin一、新建一个webpack.production.config.js的js文件二、安装mini-css-extract-plugin插件npm install --save-dev mini-css-extract-plugin三、...
webpack 中的插件(Plugins)
qq_45666837的博客
06-09 515
为什么要使用插件? 它是webpack中的一个重要功能,主要是用来提高你的开发效率,在webpack中用来扩展功能,它在整个构建过程中生效。既然它是插件,那肯定不止一个,所以当你需要某个插件的时候,要先安装在去使用,现在我就给大家介绍几个插件常用的插件吧。 HtmlWebpackPlugin 它会在你项目打包完成后,自动生成一个 html的文件,并把你自己的模板引入该html文件中。 使用它之前要先安装,命令行输入命令 : npm install --save-dev html-webpack-plug
webpack的配置和安装以及其他的一些插件的配置和应用_webpack 安装插件(1)
2401_84853560的博客
05-17 1196
在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。//导入node模块//使用node.js中的导出语法//mode代表开发的模式，可选值有两个开发模式development和生产模式production// entry:"指定要处理哪个文件"//path是node的一个模块，需要导入node模块//__dirname："代表项目根目录，后面需要拼接具体路径"
第3集丨webpack 江湖 —— 插件(plugin)的安装和使用
秋堂主的博客
07-27 996
`webpack plugins` 插件可以完成更多 `loader` 不能完成的功能。插件(`plugin`)的使用一般是在 `webpack` 的配置信息 `plugins` 选项中指定。`Webpack` 本身内置了一些常用的插件，还可以通过 `npm` 安装第三方插件。`webpack-dev-server` 可用于快速开发应用程序。类似于`node.js `阶段用到的 `nodemon` 工具，每当修改了源代码，`webpack` 会自动进行项目的打包构建。
使用@sentry/webpack-plugin上传SourceMap
放飞的博客
10-15 2213
sentry监控错误需要定位到代码，项目打包的时候需要SourceMap打开。但会导致代码不安全。为了项目的安全性，对sentry单独上传SourceMap，正式打包的时候可以关闭。 1、登入sentry官网 2、项目接入sentry npm install @sentry/vue @sentry/tracing @sentry/webpack-plugin main.js import * as Sentry from '@sentry/vue' import { Integrations } fro
配置clean-webpack-plugin 插件
05-17
clean-webpack-plugin 插件用于在每次构建前清除输出目录。要配置这个插件，首先需要安装它： ``` npm install clean-webpack-plugin --save-dev ``` 然后，在 webpack 配置文件中引入该插件： ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值