在前端开发中，使用 webpack 作为构建工具可以大大提高项目开发的效率。同时，使用 React 进行开发也很受欢迎。为了更加方便和快捷的进行 React 项目的开发，我们可以使用一个名为 generator-react-webpack-next 的 npm 包。generator-react-webpack-next 可以帮助我们快速地创建一个基于 React 和 webpack 的项目模板，同时也提供了很多常用的开发配置和工具，减少了我们的重复工作。具体使用方法如下。
使用步骤
安装 generator-react-webpack-next
首先，我们需要在全局安装 generator-react-webpack-next 包。
npm install -g generator-react-webpack-next
创建项目
接下来，我们可以使用 yeoman 工具创建一个新项目。在命令行中输入以下命令：
yo react-webpack-next
然后，我们需要回答几个问题，在命令行中输入我们的项目名称、作者、描述等等。在回答完所有问题之后，生成的项目模板就会自动下载并且创建完成。
生成的项目模板包含了以下文件和文件夹：
-- -------------------- ---- ------- --- -------------- - ------ ---- --- ---------- - --- ---- --- ------ - --- ---- --- ------- - ----- --- --------- - ------ --- --- - ------- - --- ------- - ----- ------- - --- ---------- - ----- -- - --- ------ - ------ - --- ---------- - ----- ---- - --- -------- - ----- -------- - --- ----- - ----- ----- - --- ----- - ------- - --- ---- - ------- --- ----- - ------- ----- --- ---------- - ---- --- ------------ - ------ --- ----------------- - ------- ----
运行项目
生成项目模板之后，我们可以进入项目所在的文件夹。然后，我们可以使用以下命令运行项目：
npm start
这个命令会启动一个开发服务器，然后在浏览器中打开一个新的页面，展示我们的项目。在我们修改项目代码之后，此服务器还会帮我们自动刷新浏览器页面。
编译项目
当我们开发完成一个项目之后，可以使用以下命令进行项目的编译：
npm run build
这个命令会把我们的代码打包成一个压缩版，并放到 build 文件夹下。我们可以直接拿这些文件用于生产环境。
示例代码
以下是一个简单的 React Todo List 示例代码。在这个例子中，我们演示了如何使用 generator-react-webpack-next 创建一个 React 项目，并且编写了一个简单的 Todo List 组件。
创建项目
在终端中输入以下命令：
yo react-webpack-next
按照提示，输入项目名称和作者，然后回车创建项目。
安装依赖
在我们开始编写代码之前，需要安装以下依赖：
npm install react react-dom redux react-redux --save
编写代码
接下来，我们可以开始编写代码了。在 app/components 目录下，创建一个 TodoList.js 文件，然后输入以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- -------- ------- --------- -
------------------ -
-------------
---------- - -
----------- --
--
-
-------- -
----- - ---------- - - -----------
----- - ----- ------------- - - -----------
------ -
-----
------ ------------------ ----------- -- --------------- ----------- -------------- -----
------- ----------- -- -
---------------
--- -----------
-------- ----------
---
--------------- ----------- -- ---
--------------
----
-
------------- -- -
--- ---------------------------------
--
-
-----
------
--
-
-
----- --------------- - ----- -- --
----- ----------
---
----- ------------------ - -------- -- --
-------------- ------- -- ---------- ----- ----------- ------- --
---
------ ------- ------------------------ ------------------------------在这个代码中，我们定义了一个 TodoList 组件，并在组件中实现了一个简单的 Todo List。在组件状态中，我们记录了输入框中的值。同时，我们也通过 mapDispatchToProps 方法将添加一个 Todo 的逻辑交给了 Redux。在组件中，用户可以输入一个 Todo，并按下添加按钮。然后，我们会将这个 Todo 通过 Redux 添加到 Todo List 中，并用 React 进行渲染。
修改配置
修改 webpack.config.js 文件如下：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- ----------------- - -------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
--------- -------------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
-------- -
----------------------------------
-----------------------------------------
-
-
-
--
-
----- ---------
---- - --------------- ------------ -
-
-
--
-------- -
--- -------------------------------------
--- -------------------
--------- -------------
--------- -------------
------- ----
--
--
-------- --------------------
---------- -
------------ ---------
---- ----
-
-在这个配置文件中，我们设置了代码编译模式、入口文件路径、输出文件路径、模块加载规则、插件以及开发服务器配置信息。其中，我们使用 HtmlWebpackPlugin 插件来自动生成 index.html 文件，并在编译完成之后自动打开浏览器页面。同时，我们也使用了 webpack-dev-server 来启动一个自动刷新的开发服务器。
运行项目
在命令行中输入以下命令运行项目：
npm start
这个命令将自动启动一个 webpack-dev-server，并在浏览器中打开项目页面。在这个页面中，我们可以看到我们创建的 Todo List 组件，并且成功地添加了一个 Todo。
总结
generator-react-webpack-next 是一个非常有用的工具，在我们开发 React 项目的时候可以大大缩短我们的开发时间。但是，我们也需要注意一些细节，比如 npm 包的安装、目录结构以及代码编写的规范。只有这样，我们才能更好地使用这个工具，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560d681e8991b448df175