webpack 搭建 React 项目

- 日理万妓 2022-12-09 02:46 173阅读 0赞

## 使用 webpack 打包 React 项目 ##

**根据官方文档上面说**  
**你的机器上安装的 Node >= 8.10 和 npm >= 5.6**

**1 . 所以第一步检查自己的 node 版本**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
**2 . 根据官方文档上说的，直接运行下面三句话，创建 react 项目并运行**

npx create-react-app my-app
    cd my-app
    npm start

**（ 但是也许你在执行者三句话时，会出现一些错误 ）**

比如：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]  
这时需要这样解决，全局下载 **create-react-app**

npm install -g create-react-app

![在这里插入图片描述][20200921162238558.png_pic_center]  
然后再执行上面的命令，也就是  
（ 切记创建文件时，文件名，一定**不能出现大写**，会报错 ）

npx create-react-app my-app
    cd my-app
    npm start

这样，一个最简单的 **react** 项目就搭建完成，并成功运行到你的默认浏览器上了

## 扩展一下，如果你是下载的别人的 React 项目 ##

**如果你是下载的别人的 React 项目，直接打开是打不开的，因为里面没有 node\_modules 文件，很多项目的依赖都没有，这是你需要先下载依赖文件**

yarn install

**下载完依赖文件后，运行项目即可**  
**（ 这里的 yarn start 会被默认翻译成 yarn run start）**  
**（ 但有些命令并不会默认转成 yarn run··· 的形式，如，yarn build 就不能执行，必须写 yarn run build，所以平时写全一点，会避免一些不必要的错误）**

yarn start

**或者**  
**（ 这里的 npm start 会被默认翻译成 npm run start）**

npm start

如果这行命令出错，就说明你下载的 react 项目中缺少 **yarn.lock文件**  
项目目录中只有 **package.json文件**  
这时，你就不能运行 **yarn install** 了  
要运行 **npm install**

npm install

**然后再**

yarn start

**或者**

npm start

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/aad5a9515f6047cfb034ac70a61093a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/197a1380adfb4474bb2bbeb74af9cef6.png
[20200921162238558.png_pic_center]: /images/20221123/bb7bf9f96c144beaa5fc3aaf3128fd4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/6e5c2265508f44d193ca25f4bc101c87.png