[项目][准备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

操作步骤

1. 打开命令终端，将目录切换到prepare3目录
2. 执行npm install命令，保持网络畅通，耐心等待执行完成
3. 执行npm run build命令，执行成功prepare3目录下会出现build目录
4. 进入build目录，里面会有7个文件
5. 用浏览器打开index.html文件，就能看到计算器页面

后续操作

1. 尝试使用npm run start命令(具体定义在package.json中)代替手动打开html文件的方式
2. 强烈建议将上述示例用ES6语法进行改写
3. 强烈建议从零创建一个React应用，并使用Webpack管理