利用webpack的DefinePlugin插件实现版本号的可视化

最新推荐文章于 2025-07-16 08:17:56 发布
原创 最新推荐文章于 2025-07-16 08:17:56 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue #WebPack

通过使用webpack的DefinePlugin插件，可以实现在每次发布版本时自动更新版本号，并将其可视化显示在页面上。此方法有助于快速确认版本更新状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

利用webpack的DefinePlugin插件实现版本号的可视化

原因：项目中，每次发一次版本，服务器更新都挺慢的，为了区别每一次版本是否发版成功，在webpack当中进行配置，以达到版本的可视化操作

      首先在webpack.dev.conf.js 和 webpack.prod.config.js当中,因为我们是使用插件，所以写到plugin当中，在这里插入图片描述
图中的VERSION 就是我自定义的变量，获取的本地时间
在这里插入图片描述

这时我们已经做到了每一次运行和打包的时候，能够获取到不同的时间点，这个时间点，就是我们的版本号，接下来就是做可视化操作↓

在首页登陆的地方或者在index.html当中添加一个节点用来展示这个版本号
在这里插入图片描述
随后在script中将版本号挂载到这个DOM节点上面，（可以写到APP.vue的script中，或者直接写到index.html的script中）
在这里插入图片描述

OK，亲测可用，有问题请联系我~

28、React Native 应用发布与开发工具指南
metaverse5vr的博客
08-10 17
本文详细介绍了 React Native 应用在 iOS 和 Android 平台的发布准备流程，包括图标添加、启动屏幕更新、存档创建、应用签署、测试发布版本、生成 APK 以及 Beta 测试和发布等步骤。同时，还介绍了多种 React Native 开发工具，如 Atom + Nuclide、Visual Studio Code + React Native Tools、Deco 以及 React Native Web，并对它们的特点、安装和使用方法进行了详细说明。最后，给出了开发工具的使用建议和常见问
js加版本号 webpack_webpack设置版本号和处理成单独的文件
weixin_31362539的博客
01-12 265
前言：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的DefinePlugin插件
weixin_42329676的博客
01-19 859
DefinePlugin插件是用来定义全局变量的 //webpack.config.js var webpack = require('webpack'); var path = require('path'); module.exports = { entry: { index: "./js/index.js" }, output: { path: "./dist/", filename: "js/[name].js", ...
(掌握)webpack插件-Define插件
小余的前端博客
04-26 310
但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：但是我们并没有设置过这个常量值，所以会出现没有定义的错误这个时候我们可以使用DefinePlugin插件。
Webpack插件开发深度指南：从原理到实战
最新发布
Joker的博客
07-16 1275
理解事件流机制：掌握Tapable和Webpack生命周期善用核心API：Compiler和Compilation是操作核心遵循最佳实践：异步处理、缓存优化、避免副作用完善开发者体验：文档、测试、示例缺一不可性能数据构建时间减少40%（从45s→27s）内存占用降低65%（从1.2GB→420MB）插件代码量减少50%（从500行→250行）
【亲测免费】 推荐使用：git-revision-webpack-plugin——为你的Webpack构建添加Git版本信息
gitblog_00045的博客
05-24 712
推荐使用：git-revision-webpack-plugin——为你的Webpack构建添加Git版本信息 在开发Web应用时，保持代码库的版本控制是至关重要的。为此，我们向您推荐一款强大的Webpack插件——git-revision-webpack-plugin。它能够在构建过程中自动生成VERSION和COMMITHASH文件，帮助您更好地追踪和管理项目的每一次变动。 项目介绍 git-...
使用htmlWebpackPlugin添加代码版本信息
qq_43119912的博客
08-02 842
不知道你是不是这样的场景哈，或者曾经是。你提交完代码、部署然后测试去测，测试说你这个bug改了吗，怎么还是一样？然后你就纳闷，改过了啊代码也提交了，然后你自己去点一遍验证提交的代码有没有部署上去。这是一个痛点，可能也都习惯了哈，其实，这里有个很好很简单的方式去解决这个问题。这样子打包部署后，index.html里就有相应信息了，看代码有没有部署上去直接点控制台Elements看这里就能知道了。......
webpack.DefinePlugin
weixin_34248849的博客
04-05 165
通过配置了DefinePlugin，那么这里面的标识就相当于全局变量，你的业务代码可以直接使用配置的标识。比如，你通过下面的设置： // webpack.config.js new webpack.DefinePlugin({ __DEV__: true }), 那么在你的业务代码中可以直接使用，比如有一个index.js 在index.js 你可以直接这样...
webpack面试题
fmk1023的博客
03-15 348
1.你知道webpack的作用是什么吗？
vue的官方脚手架vue-cli到底做了什么?(vue-cli webpack配置详解)
yolo0927的前端学习之路
08-20 7971
算起来有好几个月没记录学习的东西了，自己确实变懒了。。。 在这期间 1、看完了 underscore.js 的源码，分析了下公司项目中在vue-cli基础上扩展的一些webpack配置 2、开始了学习react，并利用 react 开始重写自己的新博客项目了，这次要好好做了，技术栈的话就 react react-router redux express就可以了，这次不打算使用 mongoos...
《深入浅出Webpack》学习笔记
liu14lang的博客
05-20 454
入门 先简单地提下模块化的思想。 模块化 简单来说就是将复杂的系统分解成各个简单的子模块，便于开发和维护。 一般 JavaScript 模块化规范有 CommonJS，AMD 和 ES6 中的模块化。 CommonJS 其核心思想就是利用 require 来同步加载依赖的模块，通过 module.exports 来暴露模块的接口。 优点在于 代码可在 node.js 环境下运行 NPM 包中大部分模块都支持 CommonJS 缺点在于：无法在浏览器环境下运行，要想运行必须通过工具转换。 AMD 异步模块
vue官方vue-cli构建的vue项目结构分析
saucxs
02-20 659
一、概要 vue现在在很多公司会大量使用，研究一下vue-cli脚手架构建项目的项目结构，有助于理解vue。 博客首发地址：https://www.mwcxs.top/page/570.html 使用vue-cli脚手架搭建vue项目的具体步骤如下： npm install -g vue-cli cd E:(跳转到项目目录) vue init webpack vueproject (vu...
webpack + vue 项目 自定义 插件 解决 前端 JS 版本 更新 问题
weixin_34148340的博客
08-07 280
       Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 它的异步加载原理是，事先将编译好后的静态文件，通过js对象映射，硬编码进打包后的 manifest.xxxx.js 文件中，然后通过JSONP原理按需加载每个chunk。 每个子模块加载完毕之后，浏览器将会进行本地缓存，从而节省了网络带宽。 　　W...
git clone 添加代理_浅谈git入门（二）：git基本命令（本地库?远程库）
weixin_39614546的博客
11-23 193
前言看git入门，想象自己就是开发人员，正在操作一个项目的本地与远程的文件版本更新控制。一、Git原理（why use git）1、版本控制（1）Git定义：是一个系统记录一个或者若干个文件内容变化，以便将来查阅特定版本修订情况的系统。（2）Git用处：情况一：项目文件中有很多文件，经过许多天后修改若干个文件，想找到之前某一天所修改的错误记录，却无从查起，这个时候便需要一个有提交文件记录（包括提...
实用webpack插件之DefinePlugin
weixin_33872660的博客
12-01 4862
通过阅读这篇文章，可以学习到如何使用DefinePlugin插件使得前端项目更加工程化，说清晰点就是如何使用这个插件，在编译阶段根据NODE_ENV自动切换配置文件，提升前端开发效率。 DefinePlugin的正确用法 如何使用DefinePlugin添加配置文件，构建期间自动检测环境变化，也就是如何根据NODE_ENV引入配置文件？ DefinePlugin的正确用法 DefinePlu...
defineplugin webpack_使用webpack提升vue.js应用程序的四种方法
weixin_34320235的博客
12-30 284
使用webpack提升vue.js应用程序的四种方法​mp.weixin.qq.comWebpack是开发Vue.js单页面应用程序的必要工具。通过管理复杂的构建步骤，它使您的开发工作流更加简单，并且可以优化应用程序的大小和性能。在本文中，我将解释Webpack提升Vue应用程序的四种方法，包括:单一文件组件优化Vue构建浏览器缓存管理代码分离vue-cli怎么样？如果您使用模板从vue-cli构...
vue中app组件下没有渲染_使用Webpack提升Vue.js应用程序的4种方法（翻译）
weixin_40001519的博客
11-22 271
本文翻译自，翻译技巧不太好，不喜勿碰 ：4 Ways To Boost Your Vue.js App With Webpack众所周知，webpack 是 开发 vue.js 单页面应用程序的必备工具，通过管理复杂的构建步骤，它可以使您的开发工作流程更加简单，并且可以优化应用程序的大小和性能。在本文中，我将解释Webpack增强Vue应用程序的四种方法，包括：Single 关于 vue-cli如...
webpack中使用DefinePlugin定义全局变量
weixin_30932215的博客
04-11 1418
DefinePlugin可以在编译时期创建全局变量。DefinePlugin是webpack注入全局变量的插件，通常使用该插件来判别代码运行的环境变量。 转载于:https://www.cnblogs.com/cwxwdm/p/10691798.html...
webpack-Plugin(插件)的使用
2401_84092542的博客
04-08 880
面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取2649)][外链图片转存中…(img-NBs9lpJS-1712545302649)][外链图片转存中…(img-zf28TpyE-1712545302649)][外链图片转存中…(img-1jTRRbCA-1712545302649)]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值