创建react app ` `npm run build`只构建favicon.ico文件？

创建react app是使用create-react-app工具来快速搭建React应用的命令。npm run build命令用于将React应用打包成静态文件，以便部署到生产环境中。

默认情况下，npm run build命令会构建整个React应用，包括所有的代码、样式、图片等资源文件。但是，如果只想构建favicon.ico文件，可以通过配置来实现。

首先，在React应用的根目录下找到public文件夹，然后将要替换的favicon.ico文件放置在该文件夹中。

接下来，在根目录下的package.json文件中，找到scripts字段下的build命令，将其修改为如下内容：

"build": "react-scripts build && cp public/favicon.ico build/"

上述修改的意思是，在执行react-scripts build命令构建React应用后，使用cp命令将public/favicon.ico文件复制到构建输出目录build/中。

保存package.json文件后，再次运行npm run build命令，就只会构建并输出favicon.ico文件到build目录中，而不会重新构建整个React应用。

这样做的好处是可以节省构建时间和资源消耗，特别是在只需要更新favicon.ico文件时。

腾讯云相关产品中，可以使用云存储服务（对象存储）来存储和托管favicon.ico文件。腾讯云对象存储（COS）是一种安全、高可靠、低成本的云存储服务，适用于存储各种类型的文件和数据。您可以通过以下链接了解腾讯云对象存储服务：

请注意，以上答案仅供参考，具体的实现方式可能会因项目配置和需求而有所不同。

相关·内容

create-react-app入门教程

Create React App是FaceBook的React团队官方出的一个构建React单页面应用的脚手架工具。...Quick Start（快速入门）全局安装首先确保你电脑上安装最新的 # 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app...构建React项目的其他方式 npm # npm init is available in npm 6+ npm init react-app my-app Yarn # yarn...npm test #or yarn test 构建生产版本 npm run build #or yarn build 解压默认的webpack配置到配置文件中 npm run eject 启用sass...": "react-scripts test", 那么就可以运行以下命令进行分析最终打包的情况了： npm run build npm run analyze 其他react的默认配置直接可以使用sass

2.4K2 1

快将你的 React 应用迁移到 Vite 吧，速度太快啦

大多数人使用 Create React App 来创建 React App。虽然它支持所有开箱即用的配置。...我们可以迁移到 Vite，而不是使用 CRA 来创建 React App。Vite 是下一代前端工具，可以更快地构建应用程序。...": "vite", "build": "vite build" }, 然后，在项目根目录创建 vite.config.js 文件。... 将你的 env 从 REACT_APP 更新为 VITE，如下所示: // From REACT_APP_ENV = local REACT_APP_HOST_UR = https...or yarn 上述命令执行完毕后，npm run start 启动你的应用看看效果吧~ 结尾 Vite 看起来非常高效且快速，比 CRA 节省了更多的时间。

1.3K2 0

Create React App 源码揭秘

Create React App是一个官方支持的创建React单页应用程序的脚手架。它提供了一个零配置的现代化配置设置。平时工作中一部分项目使用的React，使用之余也需要了解其脚手架实现原理。.../bin/react-scripts.js build" }, 创建bin/react-scripts.js文件 #!...创建scripts/build.js文件，主要负责两件事拷贝模板项目的public目录下的所有静态资源到build目录下配置为production环境，使用webpack(config).run()...'), appPublic: resolveApp('public') } npm run build后可查看build目录下会生成编译打包后的所有文件 react-scripts start 创建...// 这经常会引起混乱，因为我们只使用babel处理src/中的文件。

3.6K2 0

【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

# 创建一个 cra 应用 $ npx create-react-app cra-deploy # 进入 cra 目录 $ cd cra-deploy # 进行依赖安装 $ yarn # 对资源进行构建...$ npm run build # ..../code RUN yarn && npm run build CMD npx serve -s build EXPOSE 3000 构建完成。然而还可以针对以下两点进行优化。...构建时间优化: 构建缓存我们注意到，一个前端项目的耗时时间主要集中在两个命令: npm install (yarn) npm run build 在本地环境中，如果没有新的 npm package 需要下载.../code RUN npm run build CMD npx serve -s build EXPOSE 3000 进行构建时，若可利用缓存，可看到 CACHED 标记。

1.6K2 0

如何用 esbuild 替换 Create React App 中的 Webpack

为了使事情变得简单，你只需运行npm run build，并添加一个命令将文件scp到你的服务器上。这是你第一次运行npm run build，你发现运行该命令需要花费20秒。"..."test": "react-scripts test", "eject": "react-scripts eject" }, 重新运行构建 npm run build 在默认的create-react-app...()], }).catch(() => process.exit(1)); // package.json "build": "node build.js" 更改完之后，当运行npm run build...更新index.html Create React App创建了一个public文件夹，里面预置了几个文件。...包含在其中的index.html更像是一个模板，在运行react-scripts build时，会被处理并输出到build文件夹。在我们新的esbuild构建中，index.html不需要成为模板。

2.7K2 0

React脚手架 create-react-app 快速上手教程Kotlin 开发者社区

O、运行环境 $ node -v v10.13.0 $ npm -v 6.4.1 一、安装create-react-app npm install -g create-react-app 二、创建react...应用使用 create-react-app 命令，创建react项目： $ create-react-app hello-react-demo Creating a new React app in...npm run build Bundles the app into static files for production....npm run eject Removes this tool and copies build dependencies, configuration files and scripts...To create a production build, use npm run build. ? ----

9492 0

React目录结构详细解析

总览 WebStorm创建工程后目录结构如图所示： 1、package.json 每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（..."react-scripts": "3.4.3" } 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本。...1.5 scripts字段 scripts指定了运行脚本命令的npm命令行缩写，比如start指定了运行npm run start时，所要执行的命令。...下面的设置指定了npm run start、npm run build、npm run test、npm run eject时，所要执行的命令 "scripts": { "start": "react-scripts...start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts

2.2K4 0

create-react-app 教程1 项目初始化，目录介绍

使用以下命令来创建一个react-app npm init react-app my-app cd my-app npm run start 默认启动服务的端口为3000 启动后访问 localhost...:3000 即可看到效果项目目录介绍 my-app/ README.md node_modules/ package.json public/ index.html...favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg 你可以在...src 中创建子目录。...为了加快重新构建的速度，Webpack 只处理 src 中的文件。你需要将任何 JS 和 CSS 文件放在 src 中，否则 Webpack 将发现不了它们。

3342 0

React入门系列（一）构建项目

现在，让我们一步步进入React的世界吧！第一步，如何创建React项目？ 1. 传统模式传统模式就是利用标签链接必要的React包文件，然后运行程序。 <!...通过npm创建项目利用webpack编译JSX文件，步骤如下： (1) 安装npm包，包括React相关的包，webpack loader，babel转码器等等。...('app')); (5) 运行webpack-dev-server，浏览器中打开http://localhost:9002/，既可以看到效果： npm run dev 小结也可以使用官方命令行工具create-react-app...，快速创建基于webpack+ES6的最简单的React模板项目，步骤如下： npm install -g create-react-app create-react-app my-app cd my-app.../ npm start create-react-app生成的目录格式如下所示: my-app/ README.md index.html favicon.ico node_modules

7291 0

面向 React 和 Nginx 的 Docker 多阶段构建

最后，以生产环境为目的使用 npm run build 构建应用。从此刻起，构建阶段就结束了。对于随后开始的运行阶段，使用 nginx 作为基础镜像。...然后，我们将构建阶段中 npm run build 命令的结果，也就是构建产物（诸如 index.html 和 main.js 等文件），拷贝到 nginx 服务器目录中。...RUN npm run build #运行阶段 FROM nginx COPY --from=builder /app/build /usr/share/nginx/html 下面详细解释这两个阶段。...这也是构建产物将要被创建的位置。步骤 3 – 将 package.json 文件拷贝到工作目录。npm 需要该文件以安装所需依赖项。...步骤 5 – 然后，将其它文件拷贝到工作目录，也就是包含了应用真正代码的那些文件。步骤 6 – 下一步，执行 npm run build 命令。该命令将准备好 React 应用的生产环境构建产物。

2.4K1 0

React多页面应用4(webpack自动化生成多入口页面)

然后执行 npm run entry 看下是不是创建了 entryBuild 文件夹及 index.js shop.js 执行 npm run dev 一切正常 5.接下来我们自动化生成.../webpack.com.conf'); /*删除构建目录*/ nodeCommon.deleteFile(webpackFile.devDirectory); /*创建构建目录*/ fs.mkdirSync...我们删除根目录下的 build 文件夹,然后执行 npm run devBuildHtml 看下是否自动生成了 build 文件夹和 index.html shop.html 文件 ?...run dev 一切OK 12.再往前走一步修改 package.json "devNew": "npm run entry && npm run devBuildHtml", ?...然后我们只需要有新页面的时候执行 npm run devNew 再执行 npm run dev 愉快的开发吧~~~~~~~~~~

1.8K5 0

基于qiankun微前端实战 + 部署笔记

本地启动 npm start react子应用 1.初始化项目 npm init react-app react-app-qiankun-sub 2.安装 react-app-rewired 、react-router-dom...npm i react-app-rewired --save-dev npm i react-router-dom --save 3.目录结构 react-app-qiankun-sub ├── .env...start", - "build": "react-scripts build", + "build": "react-app-rewired build", -...3.github,jenkins持续集成 // 详细配置步骤略 // github webHooks设置 // jenkins构建部分执行shell BUILD_ID=dontKillMe cd /var.../jenkins_home/workspace/react-app-qiankun-main npm install npm run build rm -rf /srv/www/react-app-qiankun-main

1.3K2 0

基于create-react-app构建多页面应用框架

create-react-app 单页面应用框架 npx create-react-app multiple-page cd multiple-page npm start 运行这些命令会在当前目录中创建一个名为...www.html.cn/create-react-app/docs/getting-started 扩展项目 Webpack 的配置在 multiple-page 的目录下，执行下面指令: npm run...eject 构建多页面应用框架 1、修改 src 目录结构删除 src 目录下的所有文件。...> You need to enable JavaScript to run this app....:3000/demo.html 项目代码: 基于create-react-app构建多页面应用框架

5.3K13 5

Vue3+Vite+Ts+Antd2.x项目搭建

NPM npm init @vitejs/app Yarn yarn create @vitejs/app 项目构建（Ts版） npm 6.x npm init @vitejs/app vue-admin-pro...--template vue-ts npm 7+, 需要额外的双横线: npm init @vitejs/app vue-admin-pro -- --template vue-ts yarn yarn...create @vitejs/app vue-admin-pro --template vue-ts 支持的模板预设包括： vanilla vue vue-ts react react-ts preact...run dev ---- 安装依赖 vue-i18n vue-router vuex ant-design-vue axios nprogress less NPM npm install vue-i18n...{js,json,ts,tsx,css,less,scss,vue,html,md}\"" } 执行 npm run lint:prettier npm run lint:eslint 前端代码风格自动化

1.4K0 0

前端构建系统-《node.js实战》

4.2.1 创建定制的npm脚本 — npm run 命令等同于npm run-scripts，用npm run script-name 可以运行任何脚本。.../node_modules/.bin/uglifyjs build/browser.js -o build/browser.js", "build": "npm run babel && npm..."build": "npm run babel && npm run uglify" 组合babel和uglify。.../node_modules/.bin/ uglify --source-map, 针对项目创建配置文件，将参数放在这个文件里将配置参数添加到package.json中如果构建复杂，可以创建一个shell.../app/index.jsx', // 输出文件，如果没有这个文件webpcak会创建 output : {path: __dirname,filename:'dist/bundle.js

1.9K2 0

create-react-app初探

本文作者：IMWeb IMWeb团队原文出处：IMWeb社区未经同意，禁止转载 create-react-app是一个react的cli脚手架+构建器，我们可以基于CRA零配置直接上手开发一个...通过3种方式快速创建一个React SPA应用: npm init with initializer (npm 6.1+) npx with generator (npm 5.2+) yarn create...CRA还能干嘛 CRA除了能帮我们构建出一个React的SPA项目(generator)，充当脚手架的作用。还能为我们在项目开发，编译时进行构建，充当builder的作用。...这个入口脚本非常简单，这里只列出主要的一个switch分支： switch (script) { case 'build': case 'eject': case 'start': case...因为create-react-app my-app之后通过模版生成的项目中入口脚本被放置在src/index.js，而入口html被放置在public/index.html，所以需要对这两个文件进行检查

1.3K1 0

docker构建前端项目的镜像多种示例写法

RUN npm run build FROM nginx:latest COPY nginx.conf /etc/nginx COPY --from=builder /app/build /usr/.../code RUN npm run build EXPOSE 80 CMD http-server ..../code # npm run uploadOss 是把静态资源上传至 oss 上的脚本文件 RUN npm run build && npm run uploadOss # 选择更小体积的基础镜像.../app RUN npm run build # 选择更小体积的基础镜像 FROM nginx:alpine COPY nginx.conf /etc/nginx/conf.d/default.conf...COPY --from=builder /app/build /app/build

1.4K1 0

react+antd 使用脚手架动态修改主题色

首先使用create-react-app脚手架来创建一个项目ant-theme。 D:>npx create-react-app ant-theme 2....使用npm run eject弹射出webpack等配置文件 D:\ant-theme>npm run eject 3....content="#000000" /> <meta name="description" content="Web site created using create-react-app...scripts/build.js" } } 9....使用 npm 脚本运行项目 D:\ant-theme>npm run start 运行成功打开浏览器输入 http://localhost:3000/ 即可。

2.2K0 0

使用Vue3 + Vite + Pinia创建SPA

针对我们的书店app，我们将只使用两个store：目录 store: 可用的书单购物车 store: 用户想要订购的书籍创建Pinia 我们需要创建第一个根store，并传递给vue实例。...运行生产构建为了运行生产构建，我们有几个选项，每个选项都涉及到运行Vite命令，它被含在NPM任务中。 npm run build - 这将生成index.html以及其他静态资源。...npm run preview - 这将生成生产构建版本，并使用内置的dev server运行它。默认地址是http://localhost:5000/[13]。...: npm ci - name: Start vite dev server run: npm run dev & - name: Build the app...run: npm run build - name: Start vite dev server in preview run: npm

2.6K2 0

SSR React同构渲染改造

install easywebpack-cli -g来下载全局的easy相关的命令，后面可以命令行来运行，可以不使用npm run ${script}来运行项目，否则则只能使用npm run来运行了。...2、根据自己需要来进行选用TypeScript、Ant、Redux、React Router等，我这里只使用了Antd。 3、本地开发只需要运行npm run dev即可。...本地构建是 Webpack 内存构建，文件不落地磁盘，所以 app/view 和 public 在本地开发时，是看不到文件的。...只有发布模式(npm run build)才能在这两个目录中看到构建后的文件内容。...4、本地开发没问题，在部署文件时，一定需要先运行build确保以下步骤均正常执行，生成了view文件夹和public文件夹中的文件，才能启动项目 1) 启动 Webpack 构建， 2) 文件落地磁盘服务端构建的文件放到

4901 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云