react配置homepage并去掉sourcemap

最新推荐文章于 2024-03-08 11:57:49 发布
最新推荐文章于 2024-03-08 11:57:49 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cs23405/article/details/115733221
版权
本文介绍了如何通过修改Webpack配置和package.json文件来调整打包生成的HTML文件中引用资源的路径，以及如何不生成SourceMap文件以提高构建速度。在package.json中设置"homepage":"./"可以改变默认路径，而通过在build脚本前添加"set GENERATE_SOURCEMAP=false&&"可以禁止生成SourceMap文件。
摘要由CSDN通过智能技术生成

打包build生成的文件index.html，里面的默认的路径是跟目录/ ，如果想改变路径，可以配置homepage

配置homepage

package.json文件，添加 "homepage":"./"

如果不想生成打包的map文件，可以将package.json文件中的node scripts/build.js 修改为 set GENERATE_SOURCEMAP=false&& node scripts/build.js（注意：false和&&之间不能有空格）

芒果终结者
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react-homepage:使用React.js构建的首页应用
04-10
欢迎来到我的主页React应用 这是我的Chrome主页，其中包含我认为最有用的功能。 特征 钟 当前日期和日期 天气（进行中） 快速Google搜索（进行中） 工具栏（进行中） 步速计算器 主题切换（小错误） Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行程序。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm
create-react-app 打包设置homepage，资源引入使用相对目录
黄彪博客
01-30 3904
文章参考 CREATE-REACT-APP 创建项目 HOMEPAGE 配置主机名不生效 create-react-app项目打的包如何修改资源根目录 问题描述 前端打包好之后放到springboot工程static目录中，springboot 用了JWT做权限管理，但是访问到打包的index.html文件之后，页面不显示内容，究其原因是因为引入的静态资源不对，返回404，导致页面没有显示出来 分析原因 根据404,查看静态资源的路径，发现是因为打包使用了’/’ 根目录，springboot 又带了“工
React HomePage 源码参考-立哥开发
weixin_45806384的博客
02-22 356
//Copyright 2008-2021 Jacky Zong. All rights reserved. // 疾如风，徐如林 // 侵略如火，不动如山 import React, { Component } from 'react' import { connect } from 'react-redux' import { Editor, EditorState, RichUtils } from 'draft-js' import 'draft-js/dist/Draft.css' impor.
从0起步使用React搭建个人主页-01-环境准备
weixin_44286800的博客
11-11 3514
用到的技术栈： 前端：React+create-react-app+redux+react-router+Antd 后台：Koajs+Mysql8.0+sequalize（ORM模型）+redis（数据缓存） 项目放于我的gitee，随缘更新，前端传送门：Excharhttps://gitee.com/exchar/homepage.git 后端传送门： Excharhttps://gitee.com/exchar/personal-home-page---koa.git 第一人称写代码？ ..
react package.json 修改proxy进行前端跨域，通过修改homepage，更改打包路径
技术分享
05-09 2990
react脚手架create-react-app 创建项目使用，会生成reactreact-domreact-scripts 记录一下自己在package.json文件内的坑 1.homepage
A10.从零开始前后端react+flask - HomPage
GreatXiang888的博客
12-01 2497
视频链接：https://www.bilibili.com/video/av77725321 代码蓝本 本套教程是以https://github.com/xwh817/staff-manager （代码文件staff-manager.rar可见QQ群：952211102 ）为蓝本，肯定有比他写的更好的，但作为初学者，已经足够了 现阶段，我们要做的项目，初期版本“卡片管理系统V0.1”，x...
react路由配置方式详解
08-29
React 路由配置是 React 应用程序中一个非常重要的部分，它可以帮助我们实现客户端路由，并提供了许多有用的功能，例如参数传递、重定向等。本篇文章将详细介绍 React 路由配置的方式，并提供了一些实用的示例代码...
VSCode 配置React Native开发环境的方法
08-28
VSCode 配置 React Native 开发环境的方法 在本文中，我们将重点介绍如何使用 VSCode 配置 React Native 开发环境。该文章将指导您一步步地配置 VSCode，以便更好地开发 React Native 应用程序。 知识点一：安装 ...
VSCode配置react开发环境的步骤
08-28
VSCode 配置 React 开发环境的步骤 本篇文章主要介绍了 VSCode 配置 React 开发环境的步骤，旨在帮助开发者快速搭建 React 开发环境。下面是 VSCode 配置 React 开发环境的步骤： 一、安装 ESLint 插件 在 VSCode...
React降级配置及Ant Design配置详解
10-17
React降级配置主要涉及到的是对`create-react-app`创建的应用进行自定义配置，以适应对旧版浏览器（如IE11）的支持。首先，通过`create-react-app`创建一个新的项目目录，然后查看`package.json`文件，注意到默认的`...
react-amap：基于React封装的高德地图组件。基于React的AMap组件
02-05
react-amap是一个基于React封装的高德地图组件；帮助您轻松的接收地图到React项目中。此外必须引用的Map组件外，我们目前提供了最常用的10个地图组件，能满足大部分简单的业务场景；如果你有更复杂的需求，或者找到...
react-native-amap3d：react-native高德地图组件，使用最新的3D SDK，支持Android + iOS
02-05
react-native-amap3d react-native高德地图组件，使用最新的3D SDK，支持Android + iOS，受启发，提供功能丰富且易用的接口。 相关项目推荐： 关联文档： : 功能 地图模式切换（常规，卫星，导航，夜间） 3D建筑...
react使用高德地图react-amap：Markers、Circle、ContextMenu、自定义ContextMenu
09-29
1. **react-amap**: `react-amap`是基于React的高德地图组件库，它将高德地图API的功能转化为React组件，使得开发者可以在React应用中直接使用高德地图，实现地图的渲染、事件处理、标记点、覆盖物等地图功能。...
React + webpack 环境配置的方法步骤
08-29
React + Webpack 环境配置方法步骤 React 是一个流行的前端框架，用于构建用户界面，而 Webpack 是一个流行的模块打包工具，用于管理和编译 JavaScript 模块。为了使用 React 和 Webpack 构建一个完整的前端环境，...
关于react-router的几种配置方式详解
08-29
React Router 配置方式详解 React Router 是一个流行的 JavaScript 库，用于管理单页面应用程序中的路由。react-router 提供了多种配置方式，以下是关于 react-router 的几种配置方式详解。 1. 标签方式 在 React...
react项目搭建上
infinovachenm的博客
10-12 209
react项目搭建上创建项目精简项目建立项目结构+暴露配置文件引入Sass/Scss配置路由 创建项目 npx create-react-app myDemo (项目名称) 精简项目 红框内的index.js文件一定要保留，之后yarn start会报错，得将App.js和index.js内多余的链接删掉，保证能运行。删除后如下图： 建立项目结构+暴露配置文件 暴露配置文件之前需要先整体提交一次 提交完成之后暴露配置文件yarn eject,暴露后如下图所示 引入Sass/Scss yarn
react-打包部署
大帅的博客
12-12 7205
打包部署流程： 在项目目录中找到package.json，并在其中加入一行"homepage": “.”, 切换到对应目录下，输入命令，进行打包 npm run build 如果是webstorm Terminal控制台的话就直接输入命令 打包完成后发布目录就是在当前项目build文件夹下 里头的HTML可以直接访问 注： 如果打包的时候不加入"homepage": “.”,打包成功，但是...
react 实现页面跳转
每天都想吃好吃的
08-01 1667
在React中，你可以使用react-router-dom库来实现页面的跳转。该库提供了一些组件和函数，用于管理路由和导航。
react项目打包二级目录
最新发布
小白菜的博客
03-08 941
在React 18.x中，如果你使用的是Create React App (CRA)来创建和管理你的项目，你可以通过修改package.json文件中的homepage字段来配置应用打包到一个二级目录。process.env.PUBLIC_URL在开发环境中通常是空字符串，在生产环境中则是你在package.json中设置的homepage字段的值。在create-react-app创建的项目中，可以通过process.env.PUBLIC_URL来访问homepage字段中定义的URL。
react配置less
08-14
在React项目中配置Less样式预处理器可以按照以下步骤进行操作： 1. 首先，在项目根目录下使用命令行工具安装所需的依赖包。运行以下命令： ``` yarn add less less-loader -D ``` 这将安装Less和Less Loader作为...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值