在现代化的前端开发中，单页面应用（SPA）变得越来越流行。React 是目前最受欢迎的 SPA 框架之一，我们可以使用它来构建复杂的应用程序。但作为一个初学者，你可能会对如何设置项目的基础架构感到困惑。在这篇文章中，我们将介绍如何从零开始构建一个 React 单页面应用，并提供有意义的指导意义。
在本文的第一部分，我们将讨论如何配置 Webpack2，它是一个流行的前端构建工具，用于打包 JavaScript，CSS 和其他资源。
确保拥有 Node.js 的最新版本
在开始之前，请确保你已经安装了 Node.js 的最新版本。你可以前往 Node.js 的官方网站下载：https://nodejs.org。
安装 Webpack2
首先，在终端中运行以下命令，以在全局范围下安装 webpack 和 webpack-dev-server：
npm install -g webpack webpack-dev-server
接着，在你的项目目录中，执行以下命令以安装 webpack 和它的依赖：
npm install --save-dev webpack webpack-dev-server
这里我们使用了 --save-dev 标记，这意味着 webpack 会被安装成该项目的一个开发依赖。
创建项目的基础架构
接下来，我们需要创建一个基础的文件结构来承载我们的代码。在你的项目目录中创建一个名为 src 的目录，在该目录下创建一个名为 index.js 的文件，此文件将包含我们整个应用程序的代码。此外，为以下文件创建一个名为 index.html 的文件，以作为我们整个应用程序的入口点：
index.html src/ index.js
在 index.html 文件中，需要添加以下 HTML 代码：
-- -------------------- ---- -------
------
------
----- ----------------
------------ -----------
-------
------
---- ----------------
------- -------------------------
-------
-------这个 index.html 文件将在 div 元素的 id 属性中包含我们的 React 代码。 bundle.js 文件将是我们打包后的 JavaScript 文件，包含了我们的 React 代码。
接下来，我们需要安装 React 和它的 DOM 渲染器 ReactDOM。在你的终端中运行以下命令：
npm install --save react react-dom
此时，我们已经拥有了为创建一个基础的 React 应用程序所需的所有组件。
配置 Webpack
Webapck 作为一个模块打包工具，可以将你的 JavaScript、CSS 和其他资源打包成一个或多个文件。在这个例子中，我们将使用 Webpack 来构建我们的 React 应用程序。
首先，在你的项目根目录中创建一个名为 webpack.config.js 的文件，此文件将包含我们的 Webpack 配置。
在 webpack.config.js 文件中，我们将定义一个基本的 Webpack 配置，以打包我们的 React 应用程序。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
- ----- -------------- ---- --------------- -------- -------------- --
- ----- --------- ---- ---------------- ------------- -
-
--
-------- -
----------- ------- -------
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
-
--让我们分解这份 Webpack 配置文件，以便更好地了解我们正在做的事情。
首先，我们为 Webpack 的入口点指定路径和输出路径。在这个例子中，我们指定了 ./src/index.js 作为我们的应用程序的入口点，我们的打包文件将输出到 ./dist/bundle.js。
接下来，我们使用 module 对象来定义 Webpack 的加载器（loaders），以确保我们的 React 应用程序可以正确地处理 JavaScript 和 CSS 文件。
在这个例子中，我们使用了 babel-loader 来处理 JavaScript，使我们能够使用 ES6 和 JSX 语法。我们也使用了 css-loader 和 style-loader 来处理 CSS 文件，这两个加载器将在使用前将 CSS 文件加载进 JavaScript 文件中。
我们还使用了 resolve 对象来定义我们打包的文件扩展名。比如，如果你导入了一个 .js 文件，Webpack 将自动搜索该文件的变体，并根据 resolve.extensions 指定的配置自动解析扩展名。
最后，我们使用了 devServer 对象，以在开发环境中运行我们的应用程序。在这个例子中，我们将 contentBase 指定为 ./dist，以让 Webpack-dev-server 知道该从哪里提供静态文件。我们还指定了 compress 为 true，这意味着我们使用的 HTTP 响应将进行 gzip 压缩，以提供更快的加载速度。最后，我们将服务器的 port 指定为 9000。
现在，我们已经完成了基于 Webpack 的 React 开发环境的配置。你可以通过运行以下命令以启动开发服务器：
webpack-dev-server --open
访问 http://localhost:9000，你将看到你的应用程序正在运行！
结论
在本文中，我们已经介绍了如何从零开始构建一个 React 单页面应用，并成功配置了 Webpack2。这里的代码示例可以帮助你更好地理解整个过程。在下一篇文章中，我们将探讨如何使用 React Router 来创建多个页面的 React 单页面应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6734ab520bc820c5824a71f9