1. 前言
React 是一个非常流行的前端框架，为了更便捷的使用 React，社区中出现了许多相应的工具，其中就包括了 react-cli-webpack 这个 npm 包。本文将会对于 react-cli-webpack 的使用进行详细介绍。
2. react-cli-webpack 的介绍
react-cli-webpack 是一个 React 项目脚手架，封装了 Webpack 和一些必要的配置，以便使用者能够快速起步。通过 react-cli-webpack ，使用者可以创建一个整合 React、Webpack 和 Babel 的开发环境，并配置好一些常用的通用库（如 bootstrap、jQuery 等）。同时，该工具也提供了一些常见的脚本，如构建（build）、测试（test）和运行（run）等等。
react-cli-webpack 不仅能够减少项目的初始化工作量，还能约束项目的规范、统一项目的目录结构，减少人员的摩擦，提高团队的协作效率等等。
3. react-cli-webpack 的安装
使用 react-cli-webpack 需要先安装 Node.js 和 npm 。
安装 Node.js 和 npm 后，使用以下命令安装 react-cli-webpack ：
$ npm install -g react-cli-webpack
安装成功后，使用以下命令可以查看 react-cli-webpack 的版本：
$ react-cli-webpack -v
4. react-cli-webpack 的使用
在安装 react-cli-webpack 成功后，使用以下命令创建一个 react 项目：
$ react-cli-webpack init <project-name>
其中，<project-name> 为使用者定义的项目名称。
执行该命令后，react-cli-webpack 会自动地下载依赖并生成项目所需的配置文件、目录结构和基本代码：
-- -------------------- ---- ------- - --- ------------ --- ------ - --- ---------- --- --- - --- ---------- - --- -------- - --- ------ --- -------- --- ---------- --- --------- --- -----------------
其中，public 目录为前端静态资源目录，src 目录为前端 React 代码目录。
以下命令可以启动 webpack-dev-server 开发服务器，以供使用者进行开发：
$ npm start
执行该命令后，react-cli-webpack 会在本地启动一个开发服务器，将默认在打开的浏览器窗口下打开 http://localhost:8080，使用者可以在页面上看到自己的 React App。此时使用者修改了代码，react-cli-webpack 也会自动地重新编译代码并刷新浏览器。
使用以下命令可以进行一次执行环境的构建：
$ npm run build
执行该命令后，react-cli-webpack 会将项目编译成一个可供测试或正式使用的版本，输出到 build 目录下。
5. 结语
通过本文的介绍，相信大家已经掌握了如何使用 react-cli-webpack 进行前端开发的基本流程。在日常的开发工作中，使用 react-cli-webpack 能够极大提高开发的效率和质量，加快开发周期，节约开发成本。希望本文可以对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a481e8991b448d2c1d