首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在react production build中生成不带哈希文件名的构建

在React的生产构建中生成不带哈希文件名的构建,可以通过配置webpack来实现。以下是一种可能的解决方案:

  1. 首先,在项目的根目录下找到webpack.config.js文件(如果没有则需要创建一个)。
  2. 打开webpack.config.js文件,找到output字段,该字段用于配置构建输出的文件名和路径。
  3. 默认情况下,output字段的filename属性是使用哈希值生成的文件名,例如bundle.[hash].js。为了生成不带哈希文件名的构建,可以将filename属性修改为固定的文件名,例如bundle.js。

示例代码如下:

代码语言:txt
复制
const path = require('path');

module.exports = {
  // 其他配置项...
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // 其他配置项...
};
  1. 保存并关闭webpack.config.js文件。
  2. 运行生产构建命令,例如npm run build。

这样,React的生产构建将生成一个名为bundle.js的文件,而不是带有哈希值的文件名。请注意,这样做可能会导致缓存问题,因为文件名没有改变,浏览器可能会继续使用旧的缓存文件。如果需要解决缓存问题,可以考虑使用版本号或其他方式来确保每次构建都生成一个新的文件名。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种灵活可扩展的云计算服务,提供高性能、可靠稳定的云服务器实例,适用于各种应用场景。

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于存储和处理各种类型的数据,包括静态文件、多媒体文件等。

更多关于腾讯云云服务器(CVM)的信息,请访问:腾讯云云服务器(CVM)产品介绍

更多关于腾讯云对象存储(COS)的信息,请访问:腾讯云对象存储(COS)产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Webpack学习总结 【原创】

产品阶段的构建 6.1 创建 webpack.production.config.js 文件 6.2 配置 package.json 6.3 优化插件 6.4 缓存 本文所有代码均已经在...cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便...eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map,这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS...产品阶段的构建 在产品阶段,还需要对打包的文件进行额外的处理,如优化、压缩、缓存及分离CSS和JS 6.1 创建 webpack.production.config.js 文件 // webpack.production.config.js...6.4 缓存 webpack可以把哈希值添加到打包的文件名中,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前 module.exports = { ..

2.4K142

入门webpack(下)

每次编译都在文件名中插入一个不同的哈希值。...在app目录下,创建一个Html文件模板,这个模板包含title等其它你需要的元素,在编译过程中,本插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,在本例中我们命名模板文件名称为...在webpack中实现HMR也很简单,只需要做两项配置 在webpack配置文件中添加HMR插件; 在Webpack Dev Server中添加“hot”参数; 不过配置完这些后,JS模块其实还是不能自动热加载的...: ["module"] }] }]] } }} 现在当你使用React时,可以热加载模块了 产品阶段的构建 目前为止,我们已经使用webpack构建了一个完整的开发环境。...(内容改变,名称相应改变) webpack可以把一个哈希值添加到打包的文件名中,使用方法如下,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前 var webpack

88560
  • Webpack学习总结

    cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便...eval-source-map 使用eval打包源文件模块,在同一个文件中生成干净的完整的source map,这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS...移除public文件夹,index.html 文件会自动生成,在app目录下创建 index.tmpl.html文件模板(包含title等必须元素),编译过程中插件会自动添加所依赖的 css、js、favicon...产品阶段的构建 在产品阶段,还需要对打包的文件进行额外的处理,如优化、压缩、缓存及分离CSS和JS 6.1 创建 webpack.production.config.js 文件 // webpack.production.config.js...6.4 缓存 webpack可以把哈希值添加到打包的文件名中,添加特殊的字符串混合体([name], [id] and [hash])到输出文件名前 module.exports = { ..

    2.6K60

    webpack——快速入门【一】

    这个文件具有最好的source map,但是它会减慢打包速度; cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行...这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。...这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。...2.在app目录下,创建一个index.tmpl.html文件模板,这个模板包含title等必须元素,在编译过程中,插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon...文件夹中多出两个文件,页面显示正常 产品阶段的构建 目前为止,我们已经使用webpack构建了一个完整的开发环境。

    11010

    webpack的基础入门

    这个文件具有最好的source map,但是它会减慢打包速度; cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行...这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。...这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。...压缩后的代码 缓存 缓存无处不在,使用缓存的最好方法是保证你的文件名和文件内容是匹配的(内容改变,名称相应改变) webpack可以把一个哈希值添加到打包的文件名中,使用方法如下,添加特殊的字符串混合体...带hash值的js名 去除build文件中的残余文件 添加了hash之后,会导致改变文件内容后重新打包时,文件名不同而内容越来越多,因此这里介绍另外一个很好用的插件clean-webpack-plugin

    1.5K20

    从零认识webpack4.0,带你走进神秘的webpack

    而在一般情况下,需要构建符合项目要求的配置文件,可在package.json 中同过--config配置webpack的执行文件(如下) "script": { "build": "webpack...我们一般会把开发的所有源码和资源文件放在 src/ 目录下,构建的时候产出一个 build/ 目录,通常会直接拿 build 中的所有文件来发布。...[chunkhash].js' }, } ps: hash 和 chunkhash, contenthash 的区别== hash 在每次构建的时候都会重新全部生成 ,所有的文件的hash...都是同一个值, 无论是否修改了文件,所有的文件都将重新生成, 起不到缓存的效果; chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk,生成对应的哈希值,比如我们将一些公共模块...,或者第三方依赖包独立开来,接着用chunkhash 生成哈希值,只要不改变公共代码,就不需要重新构建; 然而当chunkhash 用在css 中时, 由于css 和js 用了同一个chunkhash,

    46731

    webpack配置完全指南_2023-03-01

    动态打包某一子项目 在构建多系统应用或组件库时,我们每次打包可能仅仅需要打包某一模块,此时,可以通过命令行的形式请求打印某一模块,例如: npm run build --project components...在定义包名称(例如 chunkFilename 、 filename),我们一般会用到哈希值,不同的哈希值使用的场景不同: hash build-specific, 哈希值对应每一次构建( Compilation...' } 或在命令行里配置: "build:prod": "webpack --config config/webpack.prod.config.js --mode production" 在设置了 mode...、 development、none 总结 图片 图片 图片 图片 production 模式下给你更好的用户体验: 较小的输出包体积 浏览器中更快的代码执行速度 忽略开发中的代码 不公开源代码或文件路径...不同的值会明显影响到构建(build)和重新构建(rebuild)的速度: 生产环境:默认为 null ,一般不设置( none )或 nosources-source-map 开发环境:默认为 eval

    3.4K10

    webpack配置完全指南

    动态打包某一子项目 在构建多系统应用或组件库时,我们每次打包可能仅仅需要打包某一模块,此时,可以通过命令行的形式请求打印某一模块,例如: npm run build --project components...在定义包名称(例如 chunkFilename 、 filename),我们一般会用到哈希值,不同的哈希值使用的场景不同: hash build-specific, 哈希值对应每一次构建( Compilation...: "build:prod": "webpack --config config/webpack.prod.config.js --mode production" 在设置了 mode 之后,webpack4...production 模式下给你更好的用户体验: 较小的输出包体积 浏览器中更快的代码执行速度 忽略开发中的代码 不公开源代码或文件路径 易于使用的输出资产 development 模式会给予你最好的开发体验...不同的值会明显影响到构建(build)和重新构建(rebuild)的速度: 生产环境:默认为 null ,一般不设置( none )或 nosources-source-map 开发环境:默认为 eval

    3.1K20

    谈谈webpack2的一些事

    中配置两个命令 { "dev" : "webpack", "build" : "webpack --env production" } 具体的生产环境构建方式可以参看官网[production...,比如需要配置的文件名等等,或许这是一个异步的操作,通过promise方式可以使我们在异步操作之后得到配置变量,然后再执行配置文件。...version=1ef4a2 关于怎么部署前端代码,可以查看大公司怎样开发和部署前端代码 webpack为我们提供了更简单的方式,为每个文件生成唯一的哈希值。...为了使文件更小化,webpack使用标识符而不是模块名称,在编译的时候会生成一个名字为manifest的chunk块,并且会被放入到entry中。...webpack提供了一个插件ChunkManifestWebpackPlugin,它会将manifest映射提取到一个单独的json文件中,这样在manifest块中只需要引用而不需要重新生成,所以最终的配置是这样的

    1.3K50

    转 入门Webpack,看这篇就够了

    这个文件具有最好的source map,但是它会减慢打包速度; cheap-module-source-map 在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行...这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。...这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。...在app目录下,创建一个index.tmpl.html文件模板,这个模板包含title等必须元素,在编译过程中,插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon...可以看见代码是被压缩后的 压缩后的代码 缓存 缓存无处不在,使用缓存的最好方法是保证你的文件名和文件内容是匹配的(内容改变,名称相应改变) webpack可以把一个哈希值添加到打包的文件名中,使用方法如下

    1.7K101

    vite3使用指南,小白再也不用担心项目配置问题了

    ,开箱即用 优化的构建 对于生产环境的构建有更好的优化 通用的插件,在开发和构建之间共享 Rollup-superset 插件接口。...# 测试模式 默认情况下 npm run dev 会加载 .env 和 .env.development 内的配置 npm run build 会加载 .env 和 .env.production 内的配置...** 在package.json文件中配置一个test命令 ** 环境加载优先级 一份用于指定模式的文件(例如 .env.production)会比通用形式的优先级更高(例如 .env)。...generateScopedName:生成的哈希名称,一个字符串模板或者通过函数返回 hashPrefix:生成hash名称的前缀 localsConvention:生成的配置对象的...vite在打包中会计算包的大小,但是只是计算不做处理,会长打包时间,所以可以在build中再添加一个配置项关闭打包计算。

    1.1K30

    Webpack 5 新特性尝鲜

    ,意思也很简单,未使用的导出内容不会被打包生成;它依赖于 ES2015 模块语法的 静态结构 特性,例如 import 和 export。...为了更好说明这个原理,我做了一个动画,全网首发的动画效果,简单解释一下,有两个模块四个方法,在模块 x 中,使用了 B 方法和从模块Y中导入的 C 方法,而 X 模块中自己的 A 和模块 Y 中的 D...方法,并没有使用,虽然定义了,因为没有在任何地方使用过,因此,在 “摇树” 过程中,就会被 “摇掉”; Snipaste_2021-01-20_14-00-99.gif 在 webpack 中如何使用呢...,在webpack 4 的打包结果中,我们能看到不仅代码量大,而且还有 i=789 这个多余的代码,反观 webpack 5 的打包结果,简洁到难以置信; 模块联邦 多个独立的构建可以组成一个应用程序,...这些独立的构建之间不应该存在依赖关系,因此可以单独开发和部署它们。

    1.3K10

    Webpack系列——快速入门

    ,也就是说,在开发中这些方法并没有被import,这些没有被使用的代码应该被删除的,使用uglifyjs-webpack-plugin插件可以帮助我们删除这些代码,同时做代码混淆和压缩。...plugins: [ new UglifyJSPlugin() ] }; module.exports = config; 生产和开发构建分离 生产和开发中的构建肯定是不同,生产中侧重于一个更好的开发体验...webpakck可以指定命令运行以来的配置文件,通过在package.json中写入script是一种不错的方式。...') } }) ] // ...... } 让输出的文件名带有哈希值 让文件名带有hash可以方便在生产环境中用户及时更新缓存,让文件名带有hash可以使用和构建相关的[hash...webpack不打包某些lib,这在我们开发lib的时候特别常见,比如我们为react开发插件,不希望打包的时候包含react。

    65930

    Webpack学习笔记

    这个文件具有最好的source map,但是它会减慢打包文件的构建速度| |cheap-module-source-map|在一个单独的文件中生成一个不带列映射的map,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行...这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的JS文件的执行具有性能和安全的隐患。...现在使用React进行测试,先安装 React 和 React-DOM,在终端中输入 npm install --save react react-dom 更新app/Greeter.js的内容为: /...每次编译都在文件名中插入一个不同的哈希值。...在app目录下,创建一个Html文件模板,这个模板包含title等其它你需要的元素,在编译过程中,本插件会依据此模板生成最终的html页面,会自动添加所依赖的 css, js,favicon等文件,在本例中我们命名模板文件名称为

    1.4K20

    「使用 webpack5从0到1搭建React+TypeScript 项目环境」1. React 与 TypeScript 集成

    而在 webpack.config.js中可以访问到这些环境变量。例如, --env production。对于我们的 webpack配置,有一个必须要修改之处。...目的是告诉 Webpack 将 React代码注入到 id="root"的 div 元素中,并在 HTML 中自动引入打包好的 JavaScript 和 CSS。.../config/webpack.config.js --env production" }, } 配置 React 和 TypeScript环境 安装 React 及其对应的类型库: yarn...("root") ); 通过yarn start启动开发环境,,然后我们在浏览器中访问http://localhost:3000,可以看到: 在这里插入图片描述 在 webpack 构建过程中添加类型检查...(github.com) 在 webpack 构建过程中添加代码规范校验 webpack构建流程不会执行代码规范校验。

    2.1K20

    在 React应用中实现Web推送通知

    默认情况下,Create-react-app CRA的工作方式是在开发人员模式下不存在ServiceWorker,并且任何以前安装的sw都将被虚拟人替换。...文件中的register()功能, 删除条件: process.env.NODE_ENV === 'production' 这样,不仅仅以prod模式加载服务工作者。...默认情况下,在http:// localhost:3000 / service-worker.js上将动态生成的虚拟文件提供给dev-mode 。...额外的步骤:等等,生产模式如何? 在这种情况下,Create React App会编译build文件夹中的文件,并在其中放置一个默认服务工作程序,其中包含对现代应用程序有用的东西。...首先,添加一个新的depenendecy: yarn add cra-append-sw 之后,我们需要在package.json中扩展build-script,在其中添加一个新命令,该命令在main进程之后执行

    3.2K30
    领券