使用React脚手架搭建项目，取消生成.map文件

最新推荐文章于 2023-12-20 15:53:33 发布
最新推荐文章于 2023-12-20 15:53:33 发布
阅读量758 收藏 1
点赞数 1
分类专栏： react 前端 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a1255215696/article/details/106236030
版权
本文介绍了两种在React脚手架项目中取消生成.map文件的方法：一是通过react-app-rewired和customize-cra修改config-overrides.js文件；二是创建.env文件并设置环境变量。这两种方法都涉及到对React默认webpack配置的调整，以关闭SourceMap的生成。
摘要由CSDN通过智能技术生成

有两种方法：

  1. 使用react-app-rewired customize-cra, 修改config-overrides.js文件
const {
   
  override,
} = require("customize-cra");
const path = require("path");
module.exports =
最低0.47元/天 解锁文章
蔬菜调料包
关注
专栏目录
设置环境变量关闭react-scripts的sourceMap生成
缤纷冷泪的专栏
06-15 1103
关于GENERATE_SOURCEMAP的作用原理在这篇文章中介绍过。 create-react-app ：不产生source-map来缩减打包文件体积 可以通过创建.env环境变量文件影响react-scripts start/build等命令。其实还有另一种更灵活的方式设置环境变量,使用export可以对不同的命令设置不同的环境变量. 打开package.json，找到scripts配置项 "scripts": { "start": "react-scripts start", "b
使用Webpack搭建React脚手架（上篇）
最新发布
UI_linlan的博客
12-24 526
通过使用Create React App来搭建React脚手架，我们可以快速创建一个新的React项目，并且集成了一些常用的开发工具和库。通过构建生产版本，我们可以生成一个优化后的、可部署的应用。搭建React脚手架是开发React应用的重要一步，它可以帮助我们快速初始化项目结构，并且集成一些常用的开发工具和库，提高开发效率。这将启动一个本地开发服务器，并自动在浏览器中打开一个新的标签页，显示你的React应用。CRA提供了一些默认的配置，但你也可以根据需要对项目进行定制。文件来定制你的应用。
（不要执行该操作）去除打包后静态资源文件名hash值
公z号：职场爱学习
06-18 2585
注意： 如果修改hash值的位置，会导致后面的gzip压缩无效，所以，建议不要修改hash值的位置。 默认，打包的时候，js和css文件名会带上一串随机数，每次打包，随机数都不同，导致上线部署的时候，需要先删除旧的文件，再解压，操作繁琐。 如果不删除旧的文件，直接解压，服务器的文件夹占用的磁盘空间会越来越大。 如果删除旧的文件，再解压，会导致用户在打开某个界面时，点击跳转到其它界面，会出现界面不存在的情况。 为了解决这个问题，需要去掉随机数。上线的时候，不用删除旧的文件，直接解压，覆盖文件即可，因为文件名相
create-react-app 生产环境去除sourcemap
徐同保的专栏
06-15 756
{ "script": { "build": "cross-env GENERATE_SOURCEMAP=false node scripts/build.js" } }
react打包去掉.map文件
Cool的博客
12-12 5783
map文件是帮助我们查看报错的位置的。   map文件由devtool属性控制，如果不想要map，注释掉就可以，大约webpack.config.prod.js第57行；      
create-react-app 打包去掉 map文件
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
12-20 5655
在使用 create-react-app 创建的React应用中，默认情况下会生成带有.map文件的打包文件，这些.map文件包含了源代码和调试信息，用于开发和调试过程中进行错误跟踪。然而，在生产环境中，这些.map文件通常是不必要的，因为它们会增加打包文件的大小，而且不会被浏览器使用。默认的打包文件目录截图：map文件很大，部署到生产复制有些不合适，虽然，不影响加载速度，但是占磁盘空间。配置完后需要重新 npm run build!总的来说 方法三最方便。
react 打包优化，关闭打包生成的map文件
好巧的博客
01-05 2561
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。react官方脚手架默认是将 webpack 配置隐藏起来了，在进行配置之前需要将 webpack 配置暴露出来。会出现一个命令提示：这是一个单向操作，确认操作后不可逆转/返回?打开 scripts 文件夹下的 build.js 文件。如果本篇文章对你有帮助的话，很高兴能够帮助上你。成功之后 在项目根目录会出现一个。
React学习笔记一(React入门+JSX+脚手架)
kianagrow的博客
12-13 405
React学习笔记一(React入门+JSX+脚手架)
前端四react+redux脚手架搭建.docx
12-31
使用React和Redux搭建项目 现在，我们可以使用React和Redux搭建我们的项目。创建一个新的文件`index.html`，并添加以下代码： ``` <!DOCTYPE html> <title>React Redux <div id="root"></div> ...
umi脚手架搭建的项目_使用umi脚手架来初始化React项目
weixin_32093519的博客
01-30 1061
一、开发环境首先，请安装 NodeJS。NodeJS 是一个 JS 执行环境，umi 基于 JS 编写，并且需要在你的开发机上运行，所以依赖于它。安装完成后，执行下面的命令确认是否安装成功。node -vnpm -v在 umi 中我们采用了一些 NodeJS 的新特性，请确保你的 NodeJS 版本大于等于 8.5.0。在国内，你可以安装cnpm获得更快速、更安全的包管理体验。使用如下命令安装：n...
react项目打包时关闭source-map产生的.map文件
Beamon__的博客
01-30 1441
react项目打包时关闭source-map产生的.map文件
React脚手架config-overrides.js文件的配置
coding...
04-09 3288
主要讲讲在react脚手架在不使用eject命令的情况下，如何进行webpack的配置。网上查询了好多，只有针对相关的配置，这次全面的看一看配置。在根目录下创建文件config-overrides.js，这里主要是由插件customize-cra来实现，配置包含两部分，customizer和utilitiescustomizer整体配置就是这些。
react脚手架开发uTools工具打包时去掉.map文件的解决方案
Mitchell1696的博客
02-10 657
用react脚手架项目开发utools工具时，若直接用默认打包后的文件提交审核，大概率会被撤回；原因也是会很清楚的告诉我们：“插件内请勿包含.js.map, .css.map 调试文件”。因此，笔者将盘点react脚手架项目打包去掉.map文件的解决方案。
【React】打包时不生成 .map 文件
hazelnut_x的博客
01-16 1645
.map 文件作用及 react 在打包时如何不生成 .map 文件
react打包去除map文件
dbn2001的博客
03-22 1878
在react使用命令npm run build打包文件之后，发现map包的体积过大，想要去除该文件，需要进行一下操作 node_modules/react-scripts/config/webpack.config.js注释掉 const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false'; 添加 const shouldUseSourceMap = false ...
react-app-rewired的使用备注&&禁止生成.map(对应隐藏源码)
李华明Himi
05-14 2503
一： 使用 react-app-rewired 时，除了根据文档对应修改设置外，还给予了一些配合此插件直接使用的 webpack 插件集：https://github.com/timarney/react-app-rewired#version-1x-community-maintained-rewires-check-the-plugin-repo-for-20-support 反之，根据观...
react打包去掉map文件
weixin_30621711的博客
09-05 1597
在node_modules文件夹中找到react-scripts包　　路径/node_modules/react-scripts/config/webpack.config.js 找到constshouldUseSourceMap=process.env.GENERATE_SOURCEMAP!=='false';将这一行代码注释 在下面添加一行con...
config-overrides.js配置devServer解决跨域问题
lisili1993的博客
06-15 7612
基于creact-react-app react-app-rewired搭建的项目 解决多个跨域问题 在package.json文件配置跨域不生效问题 const { override, addPostcssPlugins, fixBabelImports, overrideDevServer } = require('customize-cra'); const path = require('path'); const webpack = require('webpack'); c.
解决config-overrides.js文件的组合配置问题
lilongxian的博客
10-11 8629
1、第一步要做的； 2、以下是处理组合配置的所有源码： const path = require("path"); const { override, fixBabelImports, addWebpackAlias } = require('customize-cra'); const alter_config= ()=>(config, env)=>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值