本文记录我从环境配置到成功将React部署到本机Apache服务器的过程及遇到的问题。
环境安装
安装node.js。个人使用VSCode进行编码，这个根据个人喜好选择就行。
工程创建
npx create-react-app my-app
cd my-app
npm start
这样就完成了工程初始化。
具体如何进行开发，怎么写代码，可以阅读学习React部分。当然建议开始学习阶段先通读“高级指引”之前的所有内容。
hello world
这时候在项目目录下执行
npm start
就可以在自动弹出的浏览器中看到效果了。
构建
要把代码部署到服务器需要先进行打包。这个过程比较痛苦，会遇到一系列问题，所以一定要做好心理准备。我从第一次打包到部署成功花费了大概5、6个小时。
首先执行
npm run build
如果成功，那么恭喜你，你应该是天选之子，下面的部分可以直接跳过了，直接看"部署"部分就行，如果没有那是正常的，下面的内容应该会有所帮助。
webpack.config.js
看看你的项目根目录是否有webpack.config.js文件。没有的话
npx webpack-cli init
根据提示选择，最后会在项目根目录创建webpack.config.js文件。
有几个需要关注的点
//下面是部分文件内容
const HtmlWebpackPlugin = require("html-webpack-plugin");
const config = {
entry: "./src/index.js",//1.入口文件，注意是否与自己的项目实际目录一致
output: {
path: path.resolve(__dirname, "dist"),
clean: true //2.每次构建之前自动清理dist目录
},
devServer: {
open: true,
host: "localhost",
},
plugins: [
new HtmlWebpackPlugin({
template: "index.html",//自动生成index.html模板，如果没有这个，构建结果里面是没有index.html文件的，但是默认的模板与react不兼容。可以直接把public/index.html的文件内容复制粘贴到根目录的这个模板里来解决。
}),
]
}
HtmlWebpackPlugin.apply
Q：HtmlWebpackPlugin打包报错：TypeError: Cannot read property ‘tap‘ of undefined at HtmlWebpackPlugin.apply。
A：package.json文件
"html-webpack-plugin": "^5.3.1",
//替换为
"html-webpack-plugin": "^4.4.1",
Support for the experimental syntax 'jsx' isn't currently enabled
查看项目根目录，是否有.babelrc文件，没有的话创建一个，文件内入填入
{
"plugins": ["@babel/syntax-dynamic-import"],
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
以上只是我遇到的问题的一小部分。如果你遇到问题，一定不要着急，仔细阅读错误信息，Google，阅读文档，一定能找到解决方法。
部署
如果构建成功，就可以来到最后一步了。之所以部署到apache是因为mac系统自带。首先将刚才打包好的dist目录下的文件都拷贝到/Library/WebServer/Documents。
接下来执行
sudo apache start
在浏览器地址栏输入localhost，就能看到你的网页了。
这里额外讲一个我遇到的坑。如果你的网站有多个页面，那么很有可能遇到其他页面都是404的问题。我使用react-router-dom进行路由就遇到这个问题。根本原因是react是单页应用，不管访问啥地址都要重写到根目录的index.html。
首先在index.html目录下创建.htaccess文件，填入以下内容，由于这些目录都需要root权限，因此推荐命令行操作，sudo vi .htaccess了解一下。其他不懂的可以先简单学一下vim。
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
然后去/etc/apache2目录，打开https.conf，搜索rewrite_module，删掉最前面的“#”，保存。重启服务器
sudo apache restart
这次应该可以顺利跳转了。开启react之旅吧。
