webpack插件

最新推荐文章于 2024-07-18 12:59:05 发布
最新推荐文章于 2024-07-18 12:59:05 发布
阅读量115 收藏
点赞数
文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44442911/article/details/124923158
版权

webpack 中的插件

通过安装和配置第三方插件，可以扩展webpack的能力，从而让webpack用起来更加方便

  • webpack-dev-server
    • 类似于node.js阶段用到的nodemon工具
    • 每当修改了源代码，webpack会自动进行项目的打包和构建
  • html-webpack-plugin
    • webpack中的HTML插件（类似于一个模板引擎）
    • 可以通过此插件自定义index.html页面内容

webpack-dev-server

它会启动一个实时打包的http服务器 ，当代码修改时会自动重新打包构建

修改package.json文件中的srcipt节点，

"scripts":{
	"dev":"webpack serve "
}
//之后直接运行npm run dev 来重新进行项目的打包处理

打包配置文件的去向

  • 不配置webpack-dev-server的情况下，webpack打包生成的文件会存放在实际的物理磁盘中
    • 严格遵守开发者在webpack.config.js中指定配置
    • 根据output节点指定路径进行存放
  • 配置了webpack-dev-server之后，打包生成的文件放在了内存中（默认放在了项目根目录中，虚拟、不可见 导入时 路径是/bundle.js）
    • 不在根据output节点指定的路径，
    • 提高了实时打包输出的性能&#
最低0.47元/天 解锁文章
柒灬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
px2vw:webpack-px2vw-loader
05-14
这是一款针对webpack的像素转vw单位的loader插件 安装： npm i px2vw-view-loader 配置： 按以下loader格式，添加进入webpack配置文件，实现从px转换成vw，适用于移动端项目 module: { rules: [{ test: /\.css$/, loader:'px2vw-view-loader', query:{ viewportWidth: 750, viewportUnit: 'vw', minPixelValue:1, decimal:3 } }] } 也支持聚合的写法 module: { rules: [{ test: /\.css$/, use: ExtractCSS.extract({
手写一个webpack，看看AST怎么用
程序员成长指北
02-13 735
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群本文开始我会围绕webpack和babel写一系列的工程化文章，这两个工具我虽然天天用...
干货！撸一个webpack插件(内含tapable详解+webpack流程)
liubangbo的专栏
06-02 528
文章转自：干货！撸一个webpack插件(内含tapable详解+webpack流程) - 掘金Webpack可以将其理解是一种基于事件流的编程范例，一个插件合集。而将这些插件控制在webapck事件流上的运行的就是webpack自己写的基础类。Tapable暴露出挂载的方法，使我们能 将plugin控制在webapack事件流上运行（如下图）。后面我们将看到核心的对象 、等都是继承于类。(如下图所示)tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子。 2.使用 tap/ta
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
webpack-inject-plugin:一个webpack插件，用于将代码动态注入到包中
05-02
一个webpack插件，用于将代码动态注入到包中。 您可以查看示例 用法 # webpack . config . js const InjectPlugin = require ( 'webpack-inject-plugin' ) . default ; module . exports = { // Other stuff in ...
replace-bundle-webpack-plugin:替换webpack插件中的捆绑字符串
05-10
替换捆绑webpack插件替换webpack编译的包的字符串，与string-replace-webpack-plugin不同，此插件在依赖编译的模块上运行，因此您可以替换任何字符串，甚至require 。用法示例var ReplaceBundleStringPlugin = ...
buildFilesPlugin:webpack插件
05-02
本文将详细介绍一个名为`ShowBuildFilesPlugin`的Webpack插件，该插件在Webpack打包过程中，会打印出所有构建文件的列表，帮助开发者了解打包结果。 ### 1. 插件基本概念 Webpack插件是一系列执行特定任务的...
webpack-cdn-plugin：一个Webpack插件，它使用CDN url的外部进行生产，而使用本地node_modules进行开发
02-03
注意：这仅适用于Webpack 4，如果您仍使用Webpack 3或更低版本，请使用1.x版本HTML Webpack插件的CDN扩展 通过允许您指定要从开发中的node_modules和生产中的CDN外部化的模块，增强了功能。 基本上，这将使您大大...
styledpx2vw扩展styledcomponents具有将px转换为vw单位的功能
08-10
styled-px2vw ✨扩展styled-components，具有将px转换为vw单位的功能
px2vw一个px单位转成vw单位的VSCode插件
08-12
px2vw 一个 px 单位转成 vw 单位的 VSCode 插件
webpack由浅入深——（ast、loader和plugin）
weixin_34306676的博客
11-03 982
webpack系列文章 webpack由浅入深——（webpack基础配置） webpack由浅入深——（webpack优化配置） webpack由浅入深——（tapable） webpack由浅入深——（webapck简易版） webpack由浅入深——（ast、loader和plugin） ast AST定义了代码的结构，通过操纵这颗语法树，可以精准的定位到声明语句、赋值语句、运算语句等等...
Webpack入门到精通(AST、Babel、依赖)
qq_34998786的博客
09-09 530
❝读者投稿：作者：一咻，原文地址：https://juejin.cn/post/6975885302493609991?share_token=68a0b777-70c1-4021-a89...
总结18个 webpack 插件，总会有你想要的！
2401_84152928的博客
04-17 1031
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
webpack的像素转vw单位的loader插件
weixin_30783629的博客
06-28 593
安装： npm i px2vw-view-loader 配置： 按以下loader格式，添加进入webpack配置文件，实现从px转换成vw，适用于移动端项目 module: { rules: [{ test: /\.css$/, loader:'px2vw-view-loader', query:{ viewportWidth: 750, ...
使用webpack4从零开始打包不使用框架的多页面应用，webpack打包多页面应用，使用postcss中px-2-vw实现响应式。
MFWSCQ的博客
06-29 1629
前言，最近一直在研究webpack相关的知识，我发现webpack打包单页面应用（使用react或者vue构建的项目）会很方便，教程也很多，但是像有时候我们写的很简单的多页面应用，并且不使用框架的情况下也想使用webpack对项目进行压缩，打包和转码，但是这期间会有很多疑惑，比如怎么处理各种文件，怎么把具有html结构的代码放到dist目录，并且怎么把html文件里的img:src图片导入到目标文...
前端工程化
yiyueqinghui的博客
02-11 534
1、webpack和rollup的区别，打包出来的产物有什么区别？ 1.1、webpack： webpack官方解析：webpack 是一个现代 JavaScript应用程序的静态模块打包器。 当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。 webpack的功能：代码拆分，按需加载 webpack2后已支持tree-shaking 1.2、rollup Rollup
逆向案例二十四——webpack所需模块函数较少，某多多登录密码逆向
最新发布
m0_57265868的博客
07-18 313
确实是这里进行了加密，进入U.a函数，发现是o接收密钥，然后进行加密。o由g.a传入，这一看就像webpack,往上翻肯定有g的定义。进入o,发现是头文件，复制这个自执行函数，导出加载器。设置字典格式接收函数，删除初始化函数。这整个代码位于webpack的子文件中，我们要找到头文件。往上翻，找到g的位置，打上断点，释放其他断点，然后刷新。缺少什么模块函数，就补充什么模块函数。直接搜索加密参数，打上断点，打印参数。找到登录包，发现密码进行了加密。
如何写一个webpack插件
06-10
编写 Webpack 插件的步骤如下： 1. 创建一个 Node.js 模块，其中包含一个插件类。这个插件类需要实现 `apply` 方法，该方法会在 Webpack 打包过程中被调用。 2. 在 `apply` 方法中注册一个或多个 Webpack 生命周期钩子。Webpack 生命周期钩子是 Webpack 打包过程中的不同阶段，其中包括 `compilation`、`emit`、`done` 等。 3. 在钩子中编写插件的逻辑。例如，在 `compilation` 钩子中可以访问 Webpack 的编译对象和编译器，可以修改编译对象和编译器的行为。 4. 在插件类中定义一个可选的选项对象，用于配置插件的行为。这些选项可以通过 Webpack 配置文件中的插件选项进行传递。 下面是一个简单的 Webpack 插件的示例代码： ```javascript class HelloWorldPlugin { constructor(options) { this.options = options; } apply(compiler) { compiler.hooks.done.tap('HelloWorldPlugin', () => { console.log(`Hello, ${this.options.name}!`); }); } } module.exports = HelloWorldPlugin; ``` 在这个示例中，我们定义了一个 `HelloWorldPlugin` 类，它接受一个选项对象作为参数。在插件的 `apply` 方法中，我们注册了 `done` 钩子，并在钩子中输出一条简单的消息。 要使用这个插件，我们可以在 Webpack 配置文件中进行如下配置： ```javascript const HelloWorldPlugin = require('./HelloWorldPlugin'); module.exports = { // ... plugins: [ new HelloWorldPlugin({ name: 'World' }) ] }; ``` 在这个配置中，我们将 `HelloWorldPlugin` 插件实例传递给了 Webpack 的 `plugins` 选项。在运行 Webpack 时，插件会在 `done` 钩子中输出一条消息，例如： ``` Hello, World! ``` 除了 `done` 钩子，Webpack 还提供了很多其他的钩子，可以用于在不同的打包阶段进行操作。通过注册这些钩子，我们可以编写各种不同的 Webpack 插件，以满足不同的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值