前言
在前端开发中，使用 React 和 Webpack 是非常常见的。然而，每次新建项目时都需要手动配置项目文件，非常麻烦。为了解决这个问题，开发者们推出了一些开箱即用的脚手架工具来方便快速地创建新的 React 项目。其中一个比较好用的工具就是 generator-react-with-webpack。
简介
generator-react-with-webpack 是一个基于 Yeoman 的脚手架工具，它可以帮助开发者快速创建 React 项目，并且预先配置了 Webpack，使得开发者可以快速开始项目开发。
安装
使用 generator-react-with-webpack 创建 React 项目需要先安装 yeoman 和 generator-react-with-webpack。
- 安装 yeoman
npm install -g yo
- 安装 generator-react-with-webpack
npm install -g generator-react-with-webpack
创建项目
在终端输入以下命令创建新的 React 项目：
yo react-with-webpack
然后根据提示进行选择和输入，稍等一段时间后，一个新的 React 项目就建立完成了。
目录结构
使用 generator-react-with-webpack 创建的项目默认的目录结构如下：
-- -------------------- ---- ------- - --- --------- --- ------------ --- --- - --- -------- - --- ---------- - --- ---------- - --- ------ --- ----------------- --- ----------
- README.md - 项目的说明文档。
- package.json - 项目的配置文件，记录了项目的基本信息和依赖包。
- src - 项目的源代码目录。
- src/index.js - 项目的入口文件。
- src/index.html - 项目的 HTML 模板文件。
- src/components - 项目的组件目录。
- webpack.config.js - 项目的 Webpack 配置文件。
- .gitignore - Git 忽略文件列表。
使用示例
下面是一个简单的使用示例：
1. 创建项目
yo react-with-webpack
2. 安装依赖
npm install
3. 运行项目
npm start
4. 修改代码
在 src/components/App.js 中添加如下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- --- ------- --------------- -
-------- -
------ -
---------- -----------
--
-
-
------ ------- ----5. 查看运行效果
打开浏览器，访问 http://localhost:8080，就可以看到页面上显示 "Hello, World!" 的字样了。
总结
generator-react-with-webpack 是一个非常好用的脚手架工具，使用它可以快速创建出一个基于 React 和 Webpack 的项目，并且预先配置好了一些必要的参数。如果您正在学习 React 或是要快速创建新的 React 项目，generator-react-with-webpack 是您的不二选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005581881e8991b448d53e6