一、初始化项目
首先确保你的node 版本 >=4.0.并且确保yarn可以正常工作，关于安装yarn，你可以看这里
我们先创建个空文件夹 比如yarn-react-webpack-seed,然后输入命令：
yarn init
yarn 如果没有安装，全程用 npm代替也没问题。
项目会初始化 package.json ,然后填写一些基本信息即可。
接下来我们开始安装依赖项，再 package.json 的添加下面内容
"dependencies": { "react": "^15.4.0-rc.4", "react-dom": "^15.3.2", "react-router": "^2.8.1" }, "devDependencies": { "babel": "^6.5.2", "babel-core": "^6.17.0", "babel-loader": "^6.2.5", "babel-preset-es2015": "^6.16.0", "babel-preset-react": "^6.16.0", "history": "^4.3.0", "react-hot-loader": "^3.0.0-beta.6", "webpack": "^1.13.2", "webpack-dev-server": "^1.16.2" },
运行命令:
yarn install
你也可以自行添加依赖，输入yarn add xxx即可。
yarn add react yarn add webpack --dev ...
项目创建好后，我们接下来创建一些必要的文件和目录；
+ build + src - webpack.config.js - package.json - index.html - server.js
二、webpack
webpack （更多）是一款模块处理器，他会将你所有的代码打包成静态文件，放到你的开发的App中。
打开webpack.config.js，然后添加下面的代码:
var webpack = require('webpack'); module.exports = { entry: [ "webpack-dev-server/client?:9000", 'webpack/hot/only-dev-server', "./src/index" ], output: { path: __dirname + '/build', filename: "bundle.js", publicPath: '/build/', }, module: { loaders: [ { test: /\.js?$/, loaders: ["react-hot-loader/webpack",'babel-loader?presets[]=react,presets[]=es2015'], exclude: /node_modules/ }, { test: /\.less$/, loader: "style!css!less" } ] }, plugins: [ new webpack.NoErrorsPlugin(), new webpack.HotModuleReplacementPlugin() ] };
这份文件大概有四个配置项entry, output, module,plugins.
entry:指定打包的入口文件，每有一个键值对，就是一个入口文件。
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称，filename里面的[name]会由entry中的键替换,例子中的/build/bundle.js便是生成的文件。
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会进行处理。这里我们使用了react-hot 和 babel。babel-loader是我们使用ES-6进行开发时用于生成JS文件。
loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。yarn add添加这些插件。babel中的preset配置你也可以.babelr文件中定义：
{ "presets": [ "es2015", "react"], }
plugins: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js。
这个时候我们再package.json中加入script 字段，
"scripts": { "start": "node server.js", "build": "webpack --progress --colors" }
这个时候我们输入一个yarn start命令时候我们会启动一个webpack server这个时候你可以访问 :9000/ 看到我们的页面了; 如果你使用yarn run build时候可以将文件自动生成到bulid/下。
接下来我们新建index.html文件
<!doctype html> <html lang="en" > <head> <meta charset="UTF-8"> <title>React+React-Router+Webpack+Yarn Seed</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, user-scalable=no"> </head> <body > <div></div> <script src="https://www.jb51.net/article/build/bundle.js"></script> </body> </html>
在index.html中最重要的是引入 bundle.js,实际上index.html你可以随意修改任何代码，重要是的引入生成后的文件以及含有react渲染的DOM。
三、React-router
完成项目的基本创建，接下来我们创建src/index.js项目的入口文件。代码如下:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './app'; ReactDOM.render(<App />, document.getElementById('app'));
接下来我们再创建一些包含路由组件的文件src/app.js
import React, { Component } from 'react'; import { render } from 'react-dom'; import { Router, Route, hashHistory } from 'react-router'; // components import Links from './components/links.js'; import Start from './components/start.js'; import Guide from './components/guide.js'; import How from './components/how.js'; class App extends Component { render() { return ( <Router history={hashHistory}> <Route path="https://www.jb51.net/" component={Links}> <Route path="/start" component={Start}/> <Route path="/how" component={How}/> <Route path="/guide" component={Guide}/> </Route> </Router> ); } } export default App;
头部是我们将要用的react和react-router的模块引进来。 同时我们把用到的组件Links,Start,Guide等引进来。然后我们需要配置router
在Route中设置具体的path 和组件。
接下来我们看看如何进行路由的切换，这些内容存放到src/components/links.js中。