《二十八》React 项目中关于 Webpack 的配置

React 项目运行 yarn start 命令的启动流程：

1. 运行 create-react-app react-demo 命令，创建一个 React 项目；运行 yarn start 命令启动项目。

2. 查看项目根目录下的 package.json 文件，可以发现，运行 yarn start 命令实际上就是在运行 react-scripts start 命令。
   

3. 在项目根目录的 node_modules/.bin 下可以看到有 react-scripts，.bin 中的其实只是起一个链接的作用。
   

4. 真正的代码在 node_modules/react-scripts 中，查看 node_modules/react-scripts/package.json 文件中的 bin 属性，可以发现，react-scripts 链接到的其实是 bin/react-scripts.js 文件。
   

5. 在 node_modules/react-scripts/bin/react-scripts.js 文件中可以看到，会根据命令中不同的参数去执行 ../scripts 文件夹下的不同的文件。
   

6. 因此，在 React 项目中执行 yarn start 命令本质上就是在执行 node_modules/react-scripts/scripts/start.js 文件。

7. 查看 node_modules/react-scripts/scripts/start.js 文件，会发现，React 其实也是 new WebpackDevServer() 启动的本地服务器。
   
   

运行 yarn build 也是同理，最终执行的是 node_modules/react-scripts/scripts/build.js 文件。

React 项目中的 Webpack 配置信息：

1. node_modules/react-scripts/scripts/start.js 文件中可以看到，引入并使用了 Webpack 的配置信息。
   

   2. 在 node_modules/react-scripts/config/webpack.config.js 文件中，就可以看到 React 对 Webpack 的配置信息。
   

修改 React 项目中的 Webpack 配置信息：

使用 yarn eject 命令弹出 React 中的 Webpack 配置信息：

运行 yarn eject 命令，会将 React 中的 Webpack 配置信息弹出，react-scripts 库的 config 目录和 scripts 目录下的核心代码会被暴露出来，生成到 React 项目的根目录下；React 项目 package.json 文件中 scripts 的脚本命令也会发生变化，不再执行 react-scripts 脚本命令，而是直接使用 node 执行当前项目下的文件。

然后就可以直接修改 React 项目中的 Webpack 配置信息了。但是这个操作是不可逆的，不推荐。

craco：

使用 craco （create-react-app config）在 React 脚手架的基础上进行 Webpack 配置。使用最多。

1. 安装 craco：npm install @craco/craco。
2. 在根目录下创建 craco.config.js 配置文件编写配置信息。

   const path = require('path')
   
   module.export = {
     webpack: {
       // 设置路径别名。在项目中就可以使用 @ 来代替根目录下的 src 路径了
       alias: {
         '@': path.resolve(__dirname, 'src')
       }
     }
   }
   

3. 使用 craco 启动项目：将 package.json 中 scripts 里的 react-scripts 改为 craco，才能在运行项目将 craco.config.js 中的配置合并到 React 脚手架的配置信息中。

配置支持 Less：

1. 安装 craco-less： npm install craco-less -D。
2. 修改 craco.config.js 文件中的配置信息。

   const CracoLessPlugin = require('craco-less')
   
   module.exports = {
     plugins: [
       {plugin: CracoLessPlugin}
     ]
   }