create-react-app 脚手架打包hash值改为时间字符串格式

修改React项目构建配置

最新推荐文章于 2023-10-27 15:02:43 发布

原创最新推荐文章于 2023-10-27 15:02:43 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#hash #react

react 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何修改React项目的构建配置，以实现资源文件版本号自动更新。通过更改webpack配置文件中的参数，可以在每次构建时为CSS和JS文件添加基于当前时间戳的唯一标识符。

1. 在node_modules下找到react-scripts文件夹

cd node_modules/react-scripts

3. 在react-scripts/config文件夹找到webpack.config.prod.js

const timeStr = new Date().toLocaleString().replace(/[-:\s]+/g, '');

const cssFilename = `static/css/[name].${timeStr}.css`;

filename: `static/js/[name].${timeStr}.js`,

chunkFilename: `static/js/[name].${timeStr}.chunk.js`,

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

echo008

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

前端面试汇总-React

分享前端工程化、动效魔法与性能之舞！

06-29

1674

React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event

Webpack: 搭建 React 全栈开发环境

最新发布

Wang的专栏

06-26

1316

传统 Web 开发强调样式、结构、逻辑分离，以此降低技术复杂度。但 React 认为渲染逻辑本质上与其它 UI 逻辑存在内在耦合关系，所以提倡将结构、逻辑与样式共同存放在同一文件中，以“组件”这种松散耦合结构实现关注点分离，并为此设计实现了一套为支持这一特性，我们需要搭建一套使用的工程化环境，将 JSX 及 React 组件转换为能够在浏览器上运行的 JavaScript 代码。使用Babel处理JSX文件使用运行 React 应用。

参与评论您还未登录，请先登录后发表或查看评论

React组件打包发布npm（create-react-app+ts+cesium）

iYNing的博客

10-27

995

creat-react-app 多入口文件打包

weixin_40795574的博客

10-10

1562

creat-react-app 多入口文件打包

create-react-app打包环境配置

1234567~~

03-12

3225

create-react-app 不同环境打包及打包到对应的文件夹内设置不同环境的打包，这里区分为三种环境，线上的测试，演示，正式环境 1。安装 cross-env。兼容跨平台(window, mac)设置的环境变量的有效性。 npm install npm install --save-dev cross-env 2.在package.json中配置打包命令，create-react-app...

create-react-app 快速构建react项目

小猿猪哥的博客

11-20

538

安装create-react-app npm install -g create-react-app 新建项目 reate-react-app my-app 运行项目 cd my-app npm start 效果浏览器打开：http://localhost:3000/ 看见如下效果表示运行成功，至此新建项目成功。 ...

create-react-app模块按需加载

weixin_43443341的博客

04-29

1613

create-react-app项目打包优化介绍路由懒加载介绍本文中针对使用create-react-app创建的项目进行项目打包优化，有关Vue项目中的打包优化可以参考Vue-Cli3+eleUI项目打包优化。路由懒加载默认情况下，当下项目根路径下执行npm run build时，create-react-app内部使用webpack将src/路径下的所有代码打包成一个JS文件和一个CS...

micro-app 微前端脚手架搭建

织网的博客

05-08

4191

关于micro-app 在micro-app之前，业内已经有一些开源的微前端框架，比较流行的有2个：single-spa和qiankun。 single-spa是通过监听url change事件，在路由变化时匹配到渲染的子应用并进行渲染，这个思路也是目前实现微前端的主流方式。同时single-spa要求子应用修改渲染逻辑并暴露出三个方法：bootstrap、mount、unmount，分别对应初始化、渲染和卸载，这也导致子应用需要对入口文件进行修改。因为qiankun是基于single-spa进行封装，所以

React入门项目实操：Create React App教程

这个项目使用了Create React App，这是一个官方支持的用于设置React单页应用程序的脚手架工具。通过Create React App，开发者可以快速搭建一个项目环境，而无需配置Webpack或Babel这类构建工具的配置文件。以下是...

React和React-Router入门教程及实践指南

一般使用npm或yarn来安装所需的包，例如创建React应用通常会用到的“create-react-app”脚手架工具。 - 在React项目中，开发者可以通过路由配置文件来定义不同的路由路径和对应的组件，实现页面导航。 - 项目调试是...

前端项目打包后生成的static文件下的文件为什么都会携带hash值？

Xyt1737的博客

09-27

720

前端项目打包后生成的static文件下的文件为什么都会携带hash值？这是因为要保持最新的数据！由于文件名一直在变化，所以每次加载静态资源时都会进行协商缓存。。。

uniapp 修改打包后的js文件后缀为时间戳

weixin_50606255的博客

05-23

2363

通常我们通过uniapp打包h5端的dist包中的js文件，都会带有一串hash后缀，并且每次打包的hash后缀都没有改变，这样会导致H5新版打包上线后，用户依旧使用的是浏览器中缓存的老版js文件。文件更新滞后等现象。所以我们需要用时间戳作为后缀那么如何实现将生成的js文件的后缀改为时间戳呢？在文件夹中创建一个vue.config.js文件将以下代码复制进去即可 const Timestamp = new Date().getTime(); //当前时间为了防止打包缓存不刷新，所..

给打包文件的加上时间或者版本号

兔子零

05-04

2454

const Version = new Date().getTime() output: { path: config.build.assetsRoot, publicPath: 'http://www.baidu.com/', // 修改 https://iv...admin 这部分为你的服务器域名 filename: utils.assetsPath('js/[n...

create-react-app创建的项目,webpack打包时间查看

hetingtingitsme的博客

04-29

1575

create-react-app创建的项目都是使用webpack的node.js api去进行打包的，所以控制台不会显示打包耗时在scripts文件下，找到build.js文件，打包成功参数stats包含了打包信息 let compiler = webpack(config); return new Promise((resolve, reject) => { compiler.run((err, stats) => { if (err) { .

react项目打包

zep

02-24

8893

一、react项目打包对于使用脚手架创建的项目，打包是一件非常容易的事情： yarn build 其他文件没有太多要解析的，我们看一下js文件： [hash].chunk.js 代表是所有依赖的第三方库， vendor(第三方库) 的代码； main.[hash].chunk.js 我们自己编写的应用程序代码； runtime~main.[hash].js Webpack runtime逻辑的chunk；用于加载和运行你的应用程序；思考：随着业务逻辑代码越多，main会变得非常臃肿；二、

关于在create-react-app项目中配置HashRouter或BrowserRouter时传参的问题整理

weixin_39893889的博客

10-14

1538

关于在create-react-app项目中配置HashRouter以及BrowserRouter进行传参

（不要执行该操作）去除打包后静态资源文件名hash值

公z号：职场爱学习

06-18

2784

注意：如果修改hash值的位置，会导致后面的gzip压缩无效，所以，建议不要修改hash值的位置。默认，打包的时候，js和css文件名会带上一串随机数，每次打包，随机数都不同，导致上线部署的时候，需要先删除旧的文件，再解压，操作繁琐。如果不删除旧的文件，直接解压，服务器的文件夹占用的磁盘空间会越来越大。如果删除旧的文件，再解压，会导致用户在打开某个界面时，点击跳转到其它界面，会出现界面不存在的情况。为了解决这个问题，需要去掉随机数。上线的时候，不用删除旧的文件，直接解压，覆盖文件即可，因为文件名相

create react app 前端路由应用和部署

chuangua8063的博客

12-14

563

reactjs官方提供的create react app ，首先下载安装node.js 及npm，利用npm下载脚手架。持久使用阿里的npm镜像命令：npm config set registry https://registry.npm.taobao.org 然后全局安装npmins...

dva中打包时使用hash文件名并自动添加到index.html

ruanhao1203的专栏

08-28

1292

问题描述：如果不用 hash文件名，而是固定文件名，可能导致前段缓存这个 js文件，导致需要经常清理缓存。通过动态的hash文件名可以解决这个问题。打包后webpack会自动注入带hash的文件地址到 index.ejs文件中。 1、在 .webpackrc 文件中添加 { "hash": true, // 文件名使用hash的方式进行打包 "html": { "t...

自定义create-react-app配置工具custom-react-scripts已弃用

create-react-app是Facebook官方提供的一个用于快速搭建React应用的脚手架工具。它封装了复杂的配置和依赖管理，使得开发者可以专注于编码而不是配置工作。CRA提供了一个零配置的开发环境，并且可以通过简单的命令行...