[项目][准备3] Webpack体验

学习目标

在准备2中，我们利用React将计算器功能实现，在准备3中，我们将使用Webpack来管理React项目。

示例使用CommonJS规范，未使用ES6语法，但可以自行改写

针对Webpack给出的学习参考都是核心用法，项目将基于Webpack管理，不会对非公共部分做出任何限制

学习参考

NodeJS版本：4.5.0

Webpack版本：2.15.9

可先按以下链接顺序进行初步学习，重点在于按教程步骤实践：

Webpack傻瓜式指南(一)

Webpack傻瓜式指南(二)

Webpack傻瓜式指南(三)

下列链接建议详细学习：

WebPack常用功能介绍

下列链接可以作为参考：

关于React ES5和ES6用法的不同

前端开发者必不得不知的ES6十大特性

Getting Started | React

实践示例

这个示例细节繁多，只给出成品不作解释，具体内容都可以从上面的学习链接里找到解释

准备工作

下载node-v4.6.0-x64.msi按向导完成安装

从这个地址https://github.com/luxinasp/prepare3.git将整个项目clone或zip下载下来，得到下面目录结构

目录结构

-prepare3
-app
-components
Button.jsx
ButtonContainer.jsx
ResultShow.jsx
-containers
App.jsx
index.js
.gitignore
package.json
webpack.config.js

操作步骤

打开命令终端，将目录切换到prepare3目录

执行npm install命令，保持网络畅通，耐心等待执行完成

执行npm run build命令，执行成功prepare3目录下会出现build目录

进入build目录，里面会有7个文件

用浏览器打开index.html文件，就能看到计算器页面

后续操作

尝试使用npm run start命令(具体定义在package.json中)代替手动打开html文件的方式

强烈建议将上述示例用ES6语法进行改写

强烈建议从零创建一个React应用，并使用Webpack管理