本篇文章给大家谈谈react部署到服务器，以及打包部署对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。
一、React***打包部署
1、前言
平时写react页面，可以在cmd或者terminal里面npm start/npm run start进行测试，如果想要打包放到服务器上，需要怎么做呢？
经过踩坑终于将自己的react页面放到的服务器上运行起来，并且通过自己的"ip:port/***/"，可以在局域网内的电脑上跑起来的。
真实部署到云上或者公司服务器上还没有进行验证，因为想着和部署在本地步骤应该不差多少。
2、打包
在cmd/terminal里切到项目的工作控件下。
输入 npm run dist
等待生成dist文件夹。这就是最终打包好的资源文件夹。如果步骤出错了，需要根据线索自己排查--!,
3、放到服务器上。
我的web项目是在intellij idea上建立的项目，配置tomcat步骤和新建项目步骤可以自行百度。很多前辈们写过相应的文章。当项目建立好之后，可以尝试跑一下看看界面是否为web目录下的index.html/index.jsp？文件里面的布局。
将dist文件复制到web项目的web文件夹之下。然后重新跑tomcat就好。
4、尝试
tomcat成功启动之后，在浏览器栏输入对应的就好。默认ip+端口/为web目录下文件夹名称。
也就是dist文件夹的名称可以改为自己的项目名称。
例如，dist不修改的话。我的为我的ip例：
此时访问的就是dist文件夹下的index.html文件。
就会成功跳出来web项目的主页
5、啰嗦
最近才开始react学习，在学习过react-router之后，想着将项目放到服务器上怎么跑起来，因为之前没有弄过web项目，所以在这个过程中搜到好多的文章都有帮助。感谢那些乐于分享的前辈。
其实主要是卡在的第二步、第三步。因为之前没有web经验，也不清楚将网页部署到服务器上的步骤。
简单的将步骤给记录一下，以作备忘。
如果该文章对您有所帮助，希望您可以点下喜欢~给作者一点鼓励!
二、create-react-4和5的区别
create-react-是一种快速构建React应用程序的工具，可以自动生成开发环境和配置文件。create-react-的版本从4.0开始，到目前的5.2。
create-react- 4.0和5.0之间的主要区别如下：
支持的React版本不同：create-react- 4.0支持React 16.9及以下版本，而create-react- 5.0支持React 17及以上版本。
新增的脚本命令：create-react- 5.0新增了一些脚本命令，如npm start--inspect-brk，用于调试应用程序。
默认使用Webpack 5：create-react- 5.0默认使用Webpack 5，而create-react- 4.0使用的是Webpack 4。
三、webpackreact增量打包(webpack打包按需加载)
如何解决webpack打包的文件体积过大的问题
1、从解析依赖的角度入手，我们可以bowerinstall一些打包好的文件，然后通过设置别名让依赖指向这个文件，这样就减去了第三方库的依赖解析时间。
2、webpack把我们所有的文件都打包成一个JS文件，这样即使你是小项目，打包后的文件也会非常大。下面就来讲下如何从多个方面进行优化。
3、使用babel-minify-webpack-plugin插件可以帮助减少json文件的体积。安装插件之后，在webpack配置文件中添加如下内容plugins：[newBabiliMinifyPlugin()]这样就可以有效地减少json文件的体积，从而提高构建*能和减少服务器空间消耗。
4、提示入口文件过大，超过了默认值，查找原因后找到如下的解决方案：webpack打包后的生成文件和入口文件体积过大，超过了默认值。将入口文件和资源文件最大值调大就不会报错了，或者使用：将hints设为false，为关闭*能提示。
5、github上面有webpack作者写的一个webpack打*析的工具，可视化的看到webpack的状态，以及优化的一些建议，非常的不错。
6、安装webpack，可以挫下面的完成以后就可以一直下一步安装了。我是安装在了d盘的根目录下安装完成以后可以使用cmd输入命令查看是否安装成功。
react如何打增量包
首先需要安装一下dotenv-cli（dotenv-cli工具提供了多环境配置的能力；其使用过程为：对不同环境设置不同的环境变量文件，通过设置前端工程执行命令加载对应的环境变量文件，即可实现多环境的配置。
在工程根目录下执行打包命令注意要先保证bundle文件夹存在。
前后端完成后，将react打包后移植到django中，省去tomcat、negix的安装与配置，最后生成可执行文件，这样在对方windows电脑上可以无任何环境运行。
create-react-创建react项目，并启动项目。项目打包。此时如果只是普通部署，不要求体验效果时，把build文件下的文件拷贝到静态服务器即可。接下来考虑如何静态文件CDN部署。
国人开发，中文支付，文档全面），集成了支付、分享、推送等常用功能，配置下id和secret就可以快速使用，也是基于Webview的，这样你已经写好的代码什么都不用改，用webpack打包之后放到里面去就可以了。
虽说现在市面上组件库相当多了，但是还有一些组件特定场景市面上没有，公司内部一些不同项目，有类似相同组件可以复用，避免重复造轮子，就可以制作一个npm包，下次使用。
使用webpack4从0开始打包一个antd项目
1、穿件一个project文件夹用vscode或者其他编辑器打开，接着使用npminit初始化一个项目，初始化完成之后会有一个package.json文件。
2、在项目根目录中新建一个webpack.config.js（基于node的，所以****node.js的命令都可以识别）这样的话，就可以在终端中执行命令：webpack就可以打包了，但是还有个小问题。
3、J*ascript可能经过压缩，优化。另外，如果打包配置中未设置pathinfo为true的话，将不会包含源文件路径。就算多增加一个空格也和原始的不同了吧？不过，当webpack打包时，可以配置生成.map文件，使用此文件可以还原原文件。
4、step5：配置入口文件和出口文件每次修改js文件，手动输入命令：webpack入口文件路径-o出口文件路径重新打包，每次都要输入入口文件和出口文件，麻烦。
四、react.js在服务器端渲染有什么好处渲染是怎么个流程
1.
有些回答中提到CPU负载和node.js效率问题。服务器端渲染固然耗CPU，但可以使用服务器端缓存的方式解决，并不是每个用户访问都需要重新渲染一
遍。而且服务器端渲染甚至可以潜在地增加服务器效率（这点在参考资料第二个里有提到，不过是纯英文的，我有空会翻译下）。
2.服务器端和客户端可以共享某些代码，避免重复定义。这样可以使结构更清晰，增加可维护*
3.首次加载页面的速度加快。客户端渲染的一个缺点是，当用户第一次进入站点，此时浏览器中没有缓存，需要代码后在本地渲染，时间较长。而服务器渲染则是，用户在的已经是渲染好的页面了，打开速度比本地渲染快。
4. SEO。服务器端渲染可以让搜索引擎更容易读取页面的meta信息以及其他SEO相关信息，大大增加网站在搜索引擎中的可见度。
其实并不一定要争个好坏，服务器端和客户端渲染各有各的优缺点。建议根据实际需求，在某些页面使用服务器渲染，某些页面使用客户端渲染，以达到最佳解决方案。
五、启动前后端项目-React项目如何创建
创建React项目的步骤清晰明了，只需遵循几个关键步骤即可搭建起你的前端应用。
首先，确保安装了Node.js和npm。从官方网站安装程序并按照指引操作，确保你的开发环境已准备就绪。
接着，利用Create React App工具快速创建React项目。在命令行中输入命令：n* create-react- my-react-，将"my-react-"替换为你自定的项目名称。
若倾向于手动创建项目，可以使用npm或yarn初始化项目并安装React及其相关依赖。在项目目录中运行命令：
使用npm: npm init-y npm install react react-dom
或使用yarn: yarn init-y yarn add react react-dom
启动React开发服务器预览应用程序，使用命令：
使用npm: npm start
或使用yarn: yarn start
这会开启本地开发环境，让你在默认浏览器中查看你的React应用。
完成开发后，构建生产版本以供部署。使用命令：
使用npm: npm run build
或使用yarn: yarn build
构建后的应用会生成在"build"文件夹中，你可以将这个文件夹部署到Netlify、Vercel、GitHub Pages等平台。