在用React来开发SPA(single page application)中，一般都会使用react router来做页面的路由，而如果应用很大的话，一般都需要使用按需加载，既当进入到某个url中时才去加载其所对应的组件，这样可以让打包后的js更小，增强初始化时的速度。那么如何来完成这种按需加载呢？

由于react router 更新到最新的v4后，和之前发生了很大的变化，因此，此篇文章我将分为两部分来分别介绍react router v4前版本和v4版本的按需加载。

首先我们来建一个项目

npm init

通过按照提示配置后，我们初始化了项目，开始安装依赖

先安装我们node运行环境需要express和body-parser

npm install express body-parser

然后安装开发需要的几个环境

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react jsx jsx-loader prop-types react react-dom reat-router@3.2.1 webpack webpack-cli

此处注意，我安装的是3.2.1的react router 这个是当前v4版本以下的最后一个版本

webpack时一个打包用于前端打包的应用，可以使用npm来安装

npm install webpack -g

使用-g表示全局安装，这样就可以直接使用webpack命令了

现在就让我们来一步步新建一个简单的React应用，并使用webpack来打包生成线上版本

首先，建立一个文件夹

mkdir lesson_1

进入文件夹中，我们先用npm初始化

npm init

一直回车直到最后提示使用yes确定即可

现在目录下多了个package.json

现在我们来安装依赖包

npm install --save-dev webpack react react-dom babel-core babel-loader babel-preset-es2015 babel-preset-react jsx jsx-loader

这里说下几个包都代表什么：