通过脚手架来构建react项目

前言

在刚开始学习react时，基本上是通过手动来搭建项目的整个框架结构，包括webpack的配置文件，各种插件的安装及配置，如果每次构建项目都这么做，那么会浪费掉很长的一段时间。所以希望有一个类似于vue-cli的脚手架来快速构建项目，并上手开发。Facebook官方针对于这一情况发布了一个脚手架：creat-react-app。通过这个脚手架我们可以快速的完成一个项目的搭建。

初始化项目

首先我们需要做的是全局安装这个脚手架

npm install -g create-react-app

然后进入我们的工作空间，来创建我们的项目

create-react-app project-name  
cd project-name

上面的project-name代表的是你的项目名称。上述命令运行完成以后，我们的项目基本上算是搭建完成了。搭建完成后的项目结构非常的简洁，应该是下图。

你会发现，在这个项目结构中找不到webpack的相关配置文件，这样会让一些人感到一头的雾水，我如果添加新的插件该怎么办呢？

自定义webpack

带着上面的疑问，我在网上进行了查找，发现webpack的相关配置文件被隐藏掉了，为了项目的整洁，官方将其隐藏在了node_moudle/react-scripts中，打开这个文件夹你会发现好多关于webpack的相关配置。

当然，如果你觉得在node_module中查找，然后在修改很麻烦，你可以通过命令行的方式来让隐藏的配置文件显示出来，但是这种方式是不可逆的，也就是说显示了以后就无法在隐藏了。

npm run eject

通过这个命令以后，你就可以自由的配置项目了。例如，通过脚手架来架构起来的项目是不支持less语法的，你可以通过安装less和less-loader来使其支持，需要修改config目录下的webpack.config.dev.js，按照下图的方式来就该即可。其他的插件修改方式和webpack的添加插件方式大同小异，不再一一赘述。