6、Webpack与Babel：JavaScript项目构建利器

Webpack与Babel：JavaScript项目构建利器

1. Webpack概述

在开始一个新的同构React项目时，比如构建一个日历提醒应用，我们通常会使用npm上已有的React日历包，而不是从头开始构建日历组件。为了能在浏览器中使用这些npm包，我们需要一个构建工具，将JavaScript模块打包成浏览器能理解的形式，Webpack就是这样一个强大的构建工具。

1.1 为何需要Webpack

以下是应用的一些需求以及使用Webpack的原因：
| 需求 | Webpack是否必需 | 原因 |
| — | — | — |
| 日历组件（react - big - calendar） | 是 | 从npm包导入，Gulp、Grunt或npm构建脚本无法实现 |
| ES6 | 是 | 需要编译才能在所有浏览器中运行，Webpack加载器使编译过程更简单 |
| 加载CSS | 可选 | 可在Webpack构建中优化开发流程，Gulp和Grunt无法实现 |
| 特定环境代码 | 是 | Webpack插件可注入自定义变量，Gulp和Grunt无法实现 |

1.2 运行代码

所有示例代码可从GitHub获取：https://github.com/isomorphic-dev-js/chapter5-webpack-babel 。
操作步骤如下：
1. 使用Git克隆代码后，执行 npm install 安装依赖。
2. 运行完整示例，执行 npm run start 。