react项目中如何配置webpack

1.创建react项目

>>>>>>1.创建命令
npx create-react-app first --template typescript

>>>>>>2.执行命令
cd first
npm start

2.配置代理

方法1：使用Create React App Create React App中文文档

npm install http-proxy-middleware --save
yarn add http-proxy-middleware

在项目文件中的src目录中创建setupProxy.js文件  "src/setupProxy.js"
const { createProxyMiddleware } = require('http-proxy-middleware');  
  
module.exports = function(app) {  
    app.use(  
        '/api',  
         createProxyMiddleware({  
            target: 'http://localhost:5000',  
            changeOrigin: true,  
        })  
    );  
};

注意：不用引入项目中会自动引入

@craco/craco是一个第三方模块，通过 该模块可以实现对 webpack进行二次配置
*yarn add @craco/craco -D
*npm i @craco/craco -D
> 1.在项目根目录安装craco.config.js
module.exports = {
	// 配置开发服务器
	devServer:{
		port:80,// 端口号设置
		host:"**********"// 主机域名配置
	}
}

> 2.修改package.json
"scripts": {
-  "start": "react-scripts start"
+  "start": "craco start"
-  "build": "react-scripts build"
+  "build": "craco build"
-  "test": "react-scripts test"
+  "test": "craco test"
}
重新启动项目


//---------------------------------------
> 使用craco配置地址别名
const path = require("path");
module.exports = {
    // 1
	webpack:{
		alias:{
			// @是src目录的别名
			"@":path.resolve(__dirname,"./src")
		}
	},
	// 配置开发服务器
	devServer:{
		port:80,// 端口号设置
		host:"**************"// 主机域名配置
	}
}

特别注意：craco.config.js修改之后一定一定一定要重启，否则不会生效！

3.项目中配置相对路径（地址别名）

查看项目中是否含有config文件夹 如果项目中没有config文件夹，则执行 npm run eject命令

输入 y 然后回车就可以看到config文件夹了

打开 config 下的 webpack.config.js文件

找到resolve中的alias增加别名符号和对应的路径地址然后重启项目