1、什么是react?
React是Facebook开发的一款用于构建用户界面的JAVASCRIPT库。
2、什么是Webpack?
Webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
3、它们是如何工作的？
我们可以把它们工作的过程简单看成工厂的生产过程。它主要由以下（图1）几个模块组成，下面我们分别解释下不同模块在工作中起到的作用。
我们从node-modules开始，node-modules文件下主要是我们安装的模块包目录。在工作中我们需要先安装上我们需要的模块，才能进行开发。比如我们在开发时需要用到样式文件，我们就要安装css、less等模块。在生产过程中，它相当于我们的原材料，只有先有了原材料，我们才能生产相应的产品。
package.json是用于管理项目里面的依赖包的。就是说package.json会记录我们在node-modules中安装的模块包的版本信息等。它在生产过程中就相当于一个仓库管理员的角色，记录我们拥有的原材料信息。
组件就是我们项目的一个组件库，里面包含了js文件、svg文件、less文件、png文件等等。它在生产过程中相当于一个零件库，我们根据需要的不同，把原材料制作成不同大小、不同程度的零件。
webpack.config.js文件主要是让webpack知道如何处理我们的项目目录结构，根据我们我们设置好的文件路径进行打包，最后生成被浏览器支持的js和html文件。它在生产过程中相当于组装零件的环节，根据我们给定的图纸，进行组装最后生成一个完整的产品。
图1
4、具体步骤
1>、安装nodejs：
在github上找到关于node.js的版本；进入新建的文件夹，复制版本地址，在命令行中输入git clone (node.js版本地址）。进入node文件里，输入./configure(执行node.js里的configure文件），然后输入make install来安装。安装完成之后可以输入node -v 来查看node版本。
2>、npm镜像：
npm是node.js的包管理工具，用于node插件管理。npm安装
插件的命令是：npm install [文件名][-g][--save-dev]
因为npm安装插件是从国外的服务器下载，受网络影响大，可能出现异常，所以用npmjs.org的镜像，可以替代官方版本。
安装命令：npm installcnpm–g --registry=https://registry.npm.taobao.org
3>、创建项目文件夹react_boilerplate：
进入新建的项目文件夹react_boilerplate中，在命令行中输入npm init -y，项目的目录结构中会生成一个package.json文件，它是管理项目里的依赖包以及对当前项目基本信息的描述。 如下（图2）
图2
4>、安装webpack和react
安装webpack: cnpm i webpack --save-dev
安装react: cnpm i react react-dom --save
说明：--save-dev为开发环境依赖包，--save为生产环境依赖包。
安装完成之后，会在node_modules模块包中看到我们安装的webpack、react、react-dom模块包，同时在package.json中也会有安装的模块的版本管理。具体见下图（图3）所示：
图3
5>、创建内容组件
安装完上面这些模块之后，我们就可以创建我们的组件库了。在项目目录里新建一个app文件夹，然后在文件夹下新建一个HelloWorld.js组件.因为我们在写组件的时候是基于ES6的语法的，所以我们还需要安装babel-core、babel-loader（转化ES6代码）、babel-preset-es2015（解析ES6）、babel-preset-react（解析JSX）模块。具体代码如下（图4）：
图4
6>、创建样式组件
我们创建完内容组件之后，希望给内容增加样式，所以我们需要安装css-loader、style-loader、less-loader、less这几个模块。然后在app文件夹下创建index.less样式文件，并把需要的样式写在index.less文件中。此时，我们的样式模块包和样式文件都已经完成，就需要把我们的样式文件引入到我们需要改变的内容组件中。具体见下图（图5）：
图5
7>、创建模板文件
当我们的内容组件和样式组件都完成以后，这时我们需要的一个组装的零件部分就已经完成了。我们还需要一个html文件加载我们的组件让浏览器支持。所以在项目中创建一个templates文件夹，在文件夹中创建index.ejs模板文件。此时我们还需要安装一个html-webpack-plugin插件，具体内容（图6）如下：
图6 8>、添加访问方式（本地服务器）
此时，我们需要添加访问我们程序的方式。我们需要安装webpack-dev-server插件，然后在package.json中设置我们的路径。具体内容如下（图7）：
图7
9>、配置webpack.config.js
我们要让webpack知道我们的程序是如何运行的，所以要在webpack.config.js中配置文件入口和出口等，在出口设置的路径里，我们设置了文件的输入文件夹和文件名称。具体配置文件和目录结构如下（图8）：
图8
10>、最后在浏览器的路径栏中输入：http://localhost:3000/就可以看到我们的组件内容了。
总结工作流程如下：
网友评论